Soy nuevo en javascript y acabo de completar un tutorial sobre la manipulación de DOM.
Sin embargo, los nuevos lis se agregan después del primer li, no al final (a diferencia del tutorial).
Me encantaría entender por qué se agregan exactamente allí y cómo agregarlos al final.
const userList = document.querySelector(".name-list li"); const listInput = document.querySelector(".list-input"); const addListBtn = document.querySelector(".addListBtn"); addListBtn.addEventListener("click", function(){ const newLi = document.createElement("li"); const liContent = document.createTextNode(listInput.value); newLi.appendChild(liContent); userList.appendChild(newLi); }); <button class="addListBtn">Click me!</button> <ul class="name-list"> <li>1</li> <li>2</li> <li>3</li> </ul> <input type="text" class="list-input">Está agregando a la lista de userList que se define como:
const userList = document.querySelector(".name-list li"); Tenga en cuenta el li en el selector, por lo que está agregando a un li
Actualízalo a:
const userList = document.querySelector(".name-list"); Así que es la lista en sí misma, no el li interior.
const userList = document.querySelector(".name-list"); const listInput = document.querySelector(".list-input"); const addListBtn = document.querySelector(".addListBtn"); addListBtn.addEventListener("click", function(){ const newLi = document.createElement("li"); const liContent = document.createTextNode(listInput.value); newLi.appendChild(liContent); userList.appendChild(newLi); }); <button class="addListBtn">Click me!</button> <ul class="name-list"> <li>1</li> <li>2</li> <li>3</li> </ul> <input type="text" class="list-input">Retire li const userList = document.querySelector(".name-list");
const userList = document.querySelector(".name-list"); const listInput = document.querySelector(".list-input"); const addListBtn = document.querySelector(".addListBtn"); addListBtn.addEventListener("click", function(){ const newLi = document.createElement("li"); const liContent = document.createTextNode(listInput.value); newLi.appendChild(liContent); userList.appendChild(newLi); }); <button class="addListBtn">Click me!</button> <ul class="name-list"> <li>1</li> <li>2</li> <li>3</li> </ul> <input type="text" class="list-input">Por ejemplo:
function function1() { var ul = document. getElementById("list"); var li = document. createElement("li"); li. appendChild(document. createTextNode("Four")); ul. appendChild(li); }