Cloning an element multiple times with id

January 11, 2023

I have a li element parented to a ul with id holder. I need to clone the li multiple times, have all the clones parented to the holder ul and change their id. My hierarchy looks like this:

<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>

How can I clone the li element and than change it’s id and MY1 so I get:

<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>

>Solution :

use cloneNode to copy the li element and set the deep parameter to true to copy all the child nodes for that li element. Then use querySelector to target items within the clone and modify as required

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>