无法插入 null 的 AdjacentElement答案

【问题标题】：Cannot insertAdjacentElement of null无法插入 null 的 AdjacentElement
【发布时间】：2021-04-18 07:48:18
【问题描述】：

我有一个按钮元素，我想创建一个带有点击事件的 ul。新创建的列表也应该有一个 li 元素。这也应该通过点击元素来完成。

但是，当我尝试选择 ul 来附加 li 时，querySelector 始终为空。

document.querySelector("#add").addEventListener("click", function(e) {
  e.preventDefault();
  let list = document.createElement("ul");
  list.setAttribute("id", "liste");
  document.querySelector("body").insertAdjacentElement("afterbegin", list);

  let listelement = document.createElement("li");
  listelement.textContent = "test"
  document.querySelector("liste").insertAdjacentElement("afterbegin", listelement);
});

<h2 id="headline">List</h2>
<form id="input-form">
  <input type="submit" value="Hinzufügen" id="add">
</form>

【问题讨论】：

标签： javascript html dom event-handling dom-events

【解决方案1】：

document.querySelector("liste") 正在尝试访问名为 liste 的标签。你的意思是document.querySelector("#liste") 或更好：document.getElementById("liste")

您只能添加一次具有相同 ID 的此类元素，因为 ID 必须是唯一的。

我建议您将 UL 作为页面上的静态元素，不要在点击时创建它

并使用提交事件添加到列表中

"use strict"

document.getElementById("input-form").addEventListener("submit", function(e) {
  e.preventDefault();
  let listelement = document.createElement("li");
  listelement.textContent = document.getElementById("todo").value;
  document.getElementById("liste").insertAdjacentElement("afterbegin", listelement);
});

<h2 id="headline">List</h2>
<form id="input-form">
  <input type="text" id="todo" />
  <input type="submit" value="Hinzufügen">
</form>
<ul id="liste"></ul>

如果你真的想要一个每次点击都有一个 LI 的 UL，你可以这样做

"use strict"

document.getElementById("input-form").addEventListener("submit", function(e) {
  e.preventDefault();
  const container = document.getElementById("container");
  const idx = container.querySelectorAll("ul").length;
  const list = document.createElement("ul");
  list.setAttribute("id", "liste" + idx);
  container.insertAdjacentElement("afterbegin", list);
  let listelement = document.createElement("li");
  listelement.textContent = document.getElementById("todo").value || "test"; // if nothing entered
  list.insertAdjacentElement("afterbegin", listelement);
});

<h2 id="headline">List</h2>
<form id="input-form">
  <input type="text" id="todo" />
  <input type="submit" value="Hinzufügen">
</form>
<div id="container"></div>

如果您稍后需要在点击 LI 时执行某些操作，那么您可以从容器中委托：

document.getElementById("container").addEventListener("click",function(e) {
  const tgt = e.target.closest("li");
  if (tgt) console.log(tgt.innerText);
})

【讨论】：

待办事项列表甚至没有问题，我认为委托的想法比将听众附加到每个元素会更好javascript.info/event-delegation，如果我错了，请纠正我。
我不同意。我是第一个建议代表团的人。在这种情况下，OP 显然具有 ONE 表单和 ONE 按钮，可将 LI 添加到 UL。这里不需要委托
@RoguSmith 我加了一个版本，每次都加一个UL
不，我更喜欢认为 OP 还需要 li 元素中的事件侦听器，UL 作为静态元素的想法完全没问题。

【解决方案2】：

您只是错过了在最后一个 querySelector 的 liste id 之前添加 #。试试下面的更新代码。

document.querySelector("#add").addEventListener("click",function(e){
    e.preventDefault();
    let list = document.createElement("ul");
    list.setAttribute("id","liste");
    document.querySelector("body").insertAdjacentElement("afterbegin",list);

    let listelement = document.createElement("li");
    listelement.textContent = "test"
    document.querySelector("#liste").insertAdjacentElement("afterbegin",listelement);
});

【讨论】：

【解决方案3】：

我认为它为空，因为 querySelector 目标错误，尝试使用 querySelector("#liste")。（注意“#”）

【讨论】：