为什么没有在末尾添加新的 li？

Question

我是 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);
});

<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">

Answer 1

删除李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">

Answer 2

您要附加到定义如下的 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);
});

<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">

Answer 3

例如：

function function1() {
  var ul = document. getElementById("list");
  var li = document. createElement("li");
  li. appendChild(document. createTextNode("Four"));
  ul. appendChild(li);
}

为什么没有在末尾添加新的 li？

Why is a new li not added at the end?

javascript

html

dom-manipulation