const pickNewUl = document.getElementById("ullist1"); var createLi = document.createElement("li"); createLi.id = listItems[i].id; createLi.classList.add(pickNewUlsl); createLi.innerHTML = listItems[i].textContent; createLi.innerHTML += "<a onclick='remove(this)' class='removebtn'>X</a>"; pickNewUl.appendChild(createLi);Lo que necesito verificar en el código anterior es: Quiero verificar si existe o no existe alguna ID LI igual, si no, solo debe agregarse, de lo contrario no se agregará.
pickNewUl es una lista de UL
Puede buscar cualquier elemento dentro del elemento con .querySelectorAll como se muestra a continuación.
if (pickNewUl.querySelectorAll('#' + listItems[i].id).length === 0) { // Add element }Referencia: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
Su código completo debe ser como el siguiente.
const pickNewUl = document.getElementById("ullist1"); if (pickNewUl.querySelectorAll('#' + listItems[i].id).length === 0) { var createLi = document.createElement("li"); createLi.id = listItems[i].id; createLi.classList.add(pickNewUlsl); createLi.innerHTML = listItems[i].textContent; createLi.innerHTML += "<a onclick='remove(this)' class='removebtn'>X</a>"; pickNewUl.appendChild(createLi); }Puedes envolver tu código dentro de un if:
// the same as before but using pickNewUl instead of document if (!pickNewUl.getElementById(listItems[i].id)) { const createLi = document.createElement("li"); ... pickNewUl.appendChild(createLi); } Por cierto, sugiero usar un enfoque diferente que excluya la id duplicada:
// The string into querySelector method is a template string. if (!pickNewUl.querySelector(`[data-item-id="${listItems[i].id}"]`)) { const createLi = document.createElement("li"); createLi.dataset.itemId=listItems[i].id; ... pickNewUl.appendChild(createLi); }