为什么最后没有添加新的li？答案

【问题标题】：Why is a new li not added at the end?为什么最后没有添加新的li？
【发布时间】：2021-12-01 21:21:53
【问题描述】：

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

【问题讨论】：

标签： javascript html dom-manipulation

【解决方案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);
});

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

【讨论】：

【解决方案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);
});

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

【讨论】：

【解决方案3】：

例如：

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

【讨论】：