Могу ли я добавить один и тот же элемент 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

Модель HTML DOM построена в виде дерева объектов.У каждого DOM может быть несколько детей, но один и только один родитель .Поэтому, даже если нет ошибки JavaScript, вы не можете добавить один и тот же DOM к разным родителям.

Answer 2

Вы не можете установить дочерние элементы для нескольких родителей.Поэтому создайте 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>

Answer 3

Вы всегда можете сделать let option2 = option1.clone() или просто клонировать во время добавления: dropDown2.options.add(option.clone())