Can I add same document.createElement element on different element?

Question

I have 2 dropdown list to have same items.

This code is not working, when I create single element and tried to assign it to two different parent elements.

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

Output:

This code is working, when I create two elements, assign them values and add them to the parent element.

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

Output:

Answer 1

您总是可以let option2 = option1.clone()或只是在追加时进行克隆： dropDown2.options.add(option.clone())

Answer 2

The HTML DOM model is constructed as a tree of Objects. Each DOM can have multiple children but one and only one parent . So even if there is no JavaScript error, you can't add the same DOM to different parents.

Answer 3

You cannot set the children to have multiple parent. So create a option then clone it using cloneNode , true is for deep copy.

For this demo localStorage will not work , so harcoding the option Also not if it is an array don use for ..in to loop over it. Use native for loop or array methods like 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>