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);
What I need to check in above code is: I want to check if there are any same id LI exists or not, if not then only it should append, otherwise it will not append.
pickNewUl is a UL list
You can find for any element inside element with .querySelectorAll as below.
if (pickNewUl.querySelectorAll('#' + listItems[i].id).length === 0) {
// Add element
}
Reference : https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
Your complete code should be like below.
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);
}
You can just wrap you code inside an 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);
}
Btw, I suggest to use a different approach excluding duplicated id:
// 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);
}