使用 id 多次克隆一個元素

Question

我有一個 li 元素，它是一個帶有 id 持有者的 ul 的父元素。 我需要多次克隆 li，讓所有克隆都成為持有者 ul 的父級並更改它們的 ID。 我的層次結構如下所示：

<ul id="holder">
<li>
 <label class="toggle-button">
  <input type="checkbox" id="1" onclick="toggleCheckbox(this)"/>
    <p class="neon" >MY1 </p>
  <i class="fa fa-power-off"></i>
 </label>
</li>
</ul>

我怎樣才能克隆 li 元素而不是改變它的 id 和 MY1 所以我得到：

<ul id="holder">

<li>
 <label class="toggle-button">
  <input type="checkbox" id="1" onclick="toggleCheckbox(this)"/>
    <p class="neon" >MY: 1 </p>
  <i class="fa fa-power-off"></i>
 </label>
</li>

<li>
 <label class="toggle-button">
  <input type="checkbox" id="2" onclick="toggleCheckbox(this)"/>
    <p class="neon" >MY: 2 </p>
  <i class="fa fa-power-off"></i>
 </label>
</li>


<li>
 <label class="toggle-button">
  <input type="checkbox" id="3" onclick="toggleCheckbox(this)"/>
    <p class="neon" >MY: 3 </p>
  <i class="fa fa-power-off"></i>
 </label>
</li>

<li>
 <label class="toggle-button">
  <input type="checkbox" id="4" onclick="toggleCheckbox(this)"/>
    <p class="neon" >MY: 4 </p>
  <i class="fa fa-power-off"></i>
 </label>
</li>


</ul>

Answer 1

使用cloneNode復制li元素並將deep參數設置為true以復制該li元素的所有子節點。 然后使用querySelector定位克隆中的項目並根據需要進行修改

 let ul=document.getElementById('holder'); let li=ul.querySelector('li:first-of-type'); for(let i=0; i < 10; i++ ){ let id=i+2; let clone=li.cloneNode( true ); clone.querySelector('[type="checkbox"]').id=id; clone.querySelector('p').textContent=`MY: ${id}`; ul.appendChild( clone ); }

 <ul id="holder"> <li> <label class="toggle-button"> <input type="checkbox" id="1" onclick="toggleCheckbox(this)"/> <p class="neon" >MY1 </p> <i class="fa fa-power-off"></i> </label> </li> </ul>

Answer 2

你可以嘗試這樣的事情：

let list = document.createElement("ul");
let numberOfListItems = 5; // set how many items in the list

function makeList(){

    let id = 1;

    for(i=0; i<=(numberOfListItems-1); i++){

        let listelement = document.createElement("li");
        let label = document.createElement("label");
        label.className = "toggle-button";
        let input = document.createElement("input");
        input.setAttribute('type', 'checkbox')
        input.id = id;
        input.onclick = "toggleCheckbox(this)"
        let par = document.createElement("p");
        par.className = "neon"
        par.innerText = "MY:" + id
        let i = document.createElement("i");
        i.className = "fa fa-power-off";

        listelement.appendChild(label);
        listelement.appendChild(input);
        listelement.appendChild(par);
        listelement.appendChild(i);
        list.appendChild(listelement)

        id+=1;
    }

}