Copy selected <li> to another <ul> with js-CodePudding

function addSelected(clicked_id) {
  // alert(clicked_id);
  const ul = document.getElementById("sortable2");
  const listItems = ul.getElementsByTagName("li");
  //   const ul2 = document.getElementById('slottable1');

  // Loop through the NodeList object.
  for (let i = 0; i <= listItems.length - 1; i  ) {
    if (listItems[i].className == "selectedli") console.log(listItems[i]);

    //need to copy these <li> tags in another <ul> list
  }
}

<ul id="slottable">
//need to copy selected <li> here and also remove class from those selected <li> before adding here
</ul>

output of the console:

<li id="pc_103" >B73</li>
<li id="pc_104" >B74</li>

I have successfully printed li which I want to copy to another ul in console logs but not able to find the right code to copy them to my another ul. I also need to remove the class 'selectedli' from the li before adding it to the ul 'slottable'.

CodePudding user response：

It's done by creating dynamic tag inside slottable.

See below example:

const getChild = document.getElementById("sortable2").children;

function addSelected() {
    let createUl = document.createElement("ul");
    createUl.id = "slottable";
    document.getElementById("tagBox").appendChild(createUl);
    
    for (let i = 0; i < getChild.length; i  ) {
        if (getChild[i].className == "selectedli")
        {
            var createLi = document.createElement("li");
            createLi.id = getChild[i].id
            createLi.classList.add(getChild[i].classList);
            createLi.innerHTML = getChild[i].textContent;
        
            createUl.appendChild(createLi);
            console.log(getChild[i]);
        }
    }
    document.getElementById("sortable2").innerHTML = "";
}

ul
{
   list-style: none;
}

#sortable2
{
    padding: 10px;
    background: red;
    width: 30px;
}
    
#slottable
{
    padding: 10px;
    background: green;
    width: 30px;
}

<body>
    <div id="tagBox">

    </div>
    
    <ul id="sortable2">
       <li id="pc_103" >B73</li>
        <li id="pc_104" >B74</li> 
    </ul>
    
    <input type="button" onclick="addSelected()" value="submit">
</body>

CodePudding user response：

The appendChild() method should work.

Like this:

sortable2.appendChild(selectedli)

To remove classes, use selectedli.classList.remove(selectedli)

CodePudding user response：

You looking for something like that? It copied from one ul to the new ul and removes the class.

classList.remove and appendChild:

  lis.map((el) => {    
    el.classList.remove('selectedli');
    el.innerText  = ' (copied and without classs slectedli)'
    ul2.appendChild(el)
  })

const btn = document.getElementById('transfer');
btn.addEventListener('click', () => {
  // copy from slottable to sortable2
  const ul = document.getElementById("slottable").children;
  const ul2 = document.getElementById("sortable2");    
  let lis = Object.values(ul);
  
  lis.map((el) => {    
    el.classList.remove('selectedli');
    el.innerText  = ' (copied and without classs slectedli)'
    ul2.appendChild(el)
  })  
  ul.innerHTML = '';  
});

.green {
  background: green;
}

.gray {
  background: gray;
}

<ul id="slottable" >
  <li id="pc_103" >B73</li>
  <li id="pc_104" >B74</li>
</ul>

<ul id="sortable2" ></ul>

<button id="transfer">click </button>