将相同的元素附加到不同的元素答案

【问题标题】：Appending the same element to different elements将相同的元素附加到不同的元素
【发布时间】：2021-11-25 17:22:23
【问题描述】：

我有两个空的选择字段，我想对某个数组进行一次迭代，在每次迭代中创建一个选项元素，并将其附加到两个选择字段。问题是只有最后一个元素获得选项，第一个保持为空：

HTML

<select class="form-control" id="typeCol">
</select>
<br>
<select class="form-control" id="diffCol">
</select>

JavaScript

let typeCol = document.getElementById('typeCol');
let diffCol = document.getElementById('diffCol');
for (let i in cols) {
    let opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = cols[i];
    typeCol.appendChild(opt);
    diffCol.appendChild(opt);
}

添加另一个 for 循环并从那里附加到第二个 select 似乎可行，但仍然 - 发生了什么？

【问题讨论】：

标签： javascript dom

【解决方案1】：

//For this you can use template tag of HTML 5 :- 

<select class="form-control" id="typeCol">
  <template id="typeColTemplate">
   <option id="" value=""></option>
  </template>
</select>

<br>

<select class="form-control" id="diffCol">
  <template id="diffColTemplate">
   <option id="" value=""></option>
  </template>
</select>


//In JS:-

for (let i in cols){
var count =1;
var content = document.querySelector("#typeColTemplate").content;
var content = document.querySelector("#typeDiffTemplate").content;
var option = content.querySelector("option[id]");
option.id="opID" + count;
option.value=i;
option.innerHTML=i;
document.querySelector('#typeCol').appendChild(document.importNode(content, true));
document.querySelector('#diffCol').appendChild(document.importNode(content, true));
count++;
}

【讨论】：

【解决方案2】：

您不能附加相同的元素，但是您可以使用cloneNode() 方法创建一个克隆然后附加它。

typeCol.appendChild(opt);
diffCol.appendChild(opt.cloneNode(true));

【讨论】：

13 秒。 :-)
@user99999，她是谁？

【解决方案3】：

一个元素只能在一个父元素中。如果您在已经有父元素的元素上使用appendChild，它会从旧父元素移动到新元素。

您可以改用cloneNode 创建元素的克隆：

diffCol.appendChild(opt.cloneNode(true));

例子：

let typeCol = document.getElementById('typeCol');
let diffCol = document.getElementById('diffCol');
let cols = ["one", "two", "three"];
for (let i in cols) {
    let opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = cols[i];
    typeCol.appendChild(opt);
    diffCol.appendChild(opt.cloneNode(true));
}

<select class="form-control" id="typeCol">
</select>
<br>
<select class="form-control" id="diffCol">
</select>

【讨论】：