Question

So basically, I’ve run into this problem enough times that it is seriously frustrating me.

What I’d like to do is have code like this:

node = document.createElement("option");
textbox = document.createTextNode(currentday.getFullYear() + i);
node.value = currentday.getFullYear() + i;
node.appendChild(textbox);
document.getElementById("pick_up_year").appendChild(node);
document.getElementById("return_year").appendChild(node);

But this code only appends the nodes to return_year (a select element, obviously).

It DOES work if I repeat the code like this:

node = document.createElement("option");
textbox = document.createTextNode(currentday.getFullYear() + i);
node.value = currentday.getFullYear() + i;
node.appendChild(textbox);
document.getElementById("pick_up_year").appendChild(node);
node = document.createElement("option");
textbox = document.createTextNode(currentday.getFullYear() + i);
node.value = currentday.getFullYear() + i;
node.appendChild(textbox);
document.getElementById("return_year").appendChild(node);

But that’s hardly elegant, is it? Why am I forced to reuse code and is there an easy way around this?

The HTML is basically this:

<select id="pick_up_days" name="pick_up_day">
    <option value="nojs">Please enable JavaScript</option>
</select>
<select id="pick_up_year" name="pick_up_year">
    <option value="nojs">Please enable JavaScript</option>
</select>

Answer 1

You can try with cloneNode

document.getElementById("pick_up_year").appendChild(node);
document.getElementById("return_year").appendChild(node.cloneNode(true));