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>salida de la consola:
<li id="pc_103" class="selectedli">B73</li> <li id="pc_104" class="selectedli">B74</li>He impreso con éxito li que quiero copiar a otra ul en los registros de la consola, pero no puedo encontrar el código correcto para copiarlos a mi otra ul. También necesito eliminar la clase 'selectedli' de li antes de agregarla a ul 'slottable'.
El método appendChild() debería funcionar.
Como esto:
sortable2.appendChild(selectedli) Para eliminar clases, use selectedli.classList.remove(selectedli)
Se hace creando una etiqueta dinámica dentro de slottable .
Vea el siguiente ejemplo:
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" class="selectedli">B73</li> <li id="pc_104" class="selectedli">B74</li> </ul> <input type="button" onclick="addSelected()" value="submit"> </body>¿Estás buscando algo así? Copió de un ul al nuevo ul y elimina la clase.
classList.remove y 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" class="gray"> <li id="pc_103" class="selectedli">B73</li> <li id="pc_104" class="selectedli">B74</li> </ul> <ul id="sortable2" class="green"></ul> <button id="transfer">click </button>