我可以在不同的元素上添加相同的document.createElement元素吗？

Question

我有2个下拉列表，其中有相同的项目。

当我创建单个元素并尝试将其分配给两个不同的父元素时，此代码不起作用。

function addAssignee() {
    let dropDown1 = document.getElementById("bugOwner");
    let dropDown2 = document.getElementById("bugAssignee");

    document.getElementById("bugOwner").options.length = 0;
    document.getElementById("bugAssignee").options.length = 0;

    let localData = localStorage.getItem("users");
    let jsonObj = JSON.parse(localData);

    for (i in jsonObj.records) {
       let option = document.createElement("OPTION");
        option.innerHTML = jsonObj.records[i].name;
        option.value = jsonObj.records[i].unique;
        dropDown1.options.add(option);
        dropDown2.options.add(option);
    }
}

输出：

此代码有效，当我创建两个元素时，为其分配值并将其添加到父元素。

function addAssignee() {
    let dropDown1 = document.getElementById("bugOwner");
    let dropDown2 = document.getElementById("bugAssignee");

    document.getElementById("bugOwner").options.length = 0;
    document.getElementById("bugAssignee").options.length = 0;

    let localData = localStorage.getItem("users");
    let jsonObj = JSON.parse(localData);

    for (i in jsonObj.records) {
        let option1 = document.createElement("OPTION");
        let option2 = document.createElement("OPTION");
        option1.innerHTML = jsonObj.records[i].name;
        option1.value = jsonObj.records[i].unique;
        option2.innerHTML = jsonObj.records[i].name;
        option2.value = jsonObj.records[i].unique;
        dropDown1.options.add(option1);
        dropDown2.options.add(option2);
    }
}

输出：

Answer 1

您始终可以执行let option2 = option1.clone()，也可以在添加dropDown2.options.add(option.clone())

时克隆它。

Answer 2

HTML DOM模型被构造为对象树。每个DOM可以有多个子级，但只有一个父级。因此，即使没有JavaScript错误，您也无法将相同的DOM添加到其他父对象。

Answer 3

您不能将子级设置为具有多个父级。因此，创建一个option，然后使用cloneNode克隆它，true用于深层复制。

对于此演示localStorage无效，因此请对选项进行编码 如果是数组，也不要使用for ..in对其进行循环。使用本机for循环或类似forEach

的数组方法

let jsonObj = {
  records: [{
    name: 'A',
    unique: '1'
  }, {
    name: 'B',
    unique: '10'
  }]
}


function addAssignee() {
  let dropDown1 = document.getElementById("bugOwner");
  let dropDown2 = document.getElementById("bugAssignee");

  document.getElementById("bugOwner").options.length = 0;
  document.getElementById("bugAssignee").options.length = 0;

  let options = ''
  for (let i = 0; i < jsonObj.records.length; i++) {
    let option = document.createElement("option");
    option.text = jsonObj.records[i].name;
    option.value = jsonObj.records[i].unique;
    let opt2 = option.cloneNode(true);
    dropDown1.options.add(option);
    dropDown2.options.add(opt2);
  }
}

addAssignee()

<label for="bugOwner">Your Name</label>
<select class="form-control" id="bugOwner" name="bugOwner">
  <option value="#">TODO Later</option>
</select>

<label for="bugAssignee">Bug Assignee</label>
<select class="form-control" id="bugAssignee" name="bugAssignee">
  <option value="#">TODO Later</option>
</select>