Question 35573 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Cloning an element multiple times with id – Jquery

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

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    you can try something like that:

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

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search