Question

不允许两个变量添加相同的对象。这是一个细分市场。

 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.


                }

但是，当我声明其他Object时，它可以工作，它是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


                }

虽然问题已经解决，但我不明白其中的原因。

有人解释一下吗？感谢。

Answer 1

这很简单 - DOM中的一个元素不能有两个父母。

如果您尝试将已添加的元素作为子元素添加到另一个元素，那么它将作为子元素从早期元素中删除。

Answer 2

new Option()是用于创建HTMLOptionElement的构造函数。 Option构造函数来自DOM脚本的早期阶段，并且具有非标准语法，但在浏览器中无处不在。

new Option()返回HTMLOptionElement，它本质上是一个节点。

根据规范，节点不能同时位于文档的两个点。因此，如果节点已经有父节点，则首先删除该节点，然后将其附加到新位置。

Node.cloneNode()可用于在将节点附加到新父节点之前制作节点的副本。

＆＃13;

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));

＆＃13;

<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>

＆＃13;

Fiddle here

为什么我的两个变量不能添加同一个对象？使用Javascript

2 个答案: