Why my two variables cannot add same object? Javascript

Question

It is not allow that two variables add same object. This is a segment.

 for (var i = 0; i < categories.length; i++) {
                    var categoryId= categories[i].getElementsByTagName("CategoryID")[0].firstChild.nodeValue;
                    var categoryName = categories[i].getElementsByTagName("CategoryName")[0].firstChild.nodeValue;
                    var eleOpt = document.createElement("option");
                    var txtOpt = document.createTextNode(categoryName);


                    var catelogryAddOption = new Option(categoryName, categoryId);
                    sel.options.add(catelogryAddOption);

                    sel2.options.add(catelogryAddOption); //Here is an exception.


                }

However, it can work when I declare other Object, which is catelogryAddOption2.

enter code herefor (var i = 0; i < categories.length; i++) {
                    var categoryId= categories[i].getElementsByTagName("CategoryID")[0].firstChild.nodeValue;
                    var categoryName = categories[i].getElementsByTagName("CategoryName")[0].firstChild.nodeValue;
                    var eleOpt = document.createElement("option");
                    var txtOpt = document.createTextNode(categoryName);


                    var catelogryAddOption = new Option(categoryName, categoryId);
                    sel.options.add(catelogryAddOption);

                    var catelogryAddOption2 = new Option(categoryName, categoryId);   //This is catelogryAddOption2
                    sel2.options.add(catelogryAddOption2); // It can work


                }

Although the problem is solved, I don't understand the reason.

Does anyone explain it? Thanks.

gurvinder372 · Accepted Answer · 2015-12-29 07:09:36Z

2

It is as simple as - One element in DOM cannot have two parents.

If you try to add an already added element to DOM as a child to another element, then it is removed from the earlier element as a child.

edited Dec 29, 2015 at 7:09

answered Dec 29, 2015 at 6:51

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rayon Over a year ago

Option gets added to the second(or last) select in chrome so Once an element is added to the DOM it cannot be added again anywhere else does seem ambiguous. Refer this: jsfiddle.net/rayon_1990/tvvoy61u

gurvinder372 Over a year ago

@RayonDabre it gets added in the second select but is then removed from first one jsfiddle.net/5k3vhwqn/2. I agree that line is ambigous, changing the same.

Rayon · Accepted Answer · 2015-12-29 07:24:58Z

new Option() is a Constructor for creating an HTMLOptionElement. The Option constructor is from the very early days of DOM scripting and has non–standard syntax, but has ubiquitous support in browsers.

new Option() returns a HTMLOptionElement which is a node by nature.

As per the specifications, a node can't be in two points of the document simultaneously. So if the node already has a parent, the node is first removed, then appended at the new position.

Node.cloneNode() can be used to make a copy of the node before appending it under the new parent.

var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
var select3 = document.getElementById('select3');

var catelogryAddOption = new Option('categoryName', 'categoryId');
select1.options.add(catelogryAddOption.cloneNode(true));
select2.options.add(catelogryAddOption.cloneNode(true));
select3.options.add(catelogryAddOption.cloneNode(true));

<select id="select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select id="select2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select id="select3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Fiddle here

Collectives™ on Stack Overflow

Why my two variables cannot add same object? Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related