#javascript #html #dom-manipulation
#язык JavaScript #HTML #дом-манипуляция
Вопрос:
Я новичок в javascript и только что закончил учебник по манипулированию DOM.
Однако новые lis добавляются после первого li, а не в конце (в отличие от учебника).
Я хотел бы понять, почему они добавляются именно туда и как добавить их в конце.
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); }); lt;button class="addListBtn"gt;Click me!lt;/buttongt; lt;ul class="name-list"gt; lt;ligt;1lt;/ligt; lt;ligt;2lt;/ligt; lt;ligt;3lt;/ligt; lt;/ulgt; lt;input type="text" class="list-input"gt; Ответ №1:
Вы добавляете к userList которому определяется как:
const userList = document.querySelector(".name-list li"); Обратите li внимание на селектор, поэтому вы добавляете в li
Обновите его до:
const userList = document.querySelector(".name-list"); Так что это сам список, а не li его содержимое.
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); }); lt;button class="addListBtn"gt;Click me!lt;/buttongt; lt;ul class="name-list"gt; lt;ligt;1lt;/ligt; lt;ligt;2lt;/ligt; lt;ligt;3lt;/ligt; lt;/ulgt; lt;input type="text" class="list-input"gt; Ответ №2:
Удалить ли 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); }); lt;button class="addListBtn"gt;Click me!lt;/buttongt; lt;ul class="name-list"gt; lt;ligt;1lt;/ligt; lt;ligt;2lt;/ligt; lt;ligt;3lt;/ligt; lt;/ulgt; lt;input type="text" class="list-input"gt; Ответ №3:
Например:
function function1() { var ul = document. getElementById("list"); var li = document. createElement("li"); li. appendChild(document. createTextNode("Four")); ul. appendChild(li); }