使用空 innerHTML 创建元素 return 元素的回调函数

Question

我有一个函数可以创建带有按钮的 li 元素。但是当我通过 eventListener 调用它时，在 return 中创建的元素只是一个没有 innerHTML 内容的列表。

这是怎么回事，我该如何解决？
这是我的 JS 脚本：

const inputField = document.querySelector("input.inputField");
const addToList = document.querySelector("input.addToList");
const list = document.querySelector("div.list");

createTodo = () => {
  var li = document.createElement("li");
  let up = "<button class='up'>Up</button>";
  li.innerHTML += up;
  let down = "<button class='down'>Down</button>";
  li.innerHTML += down;
  let remove = "<button class='remove'>Remove</button>";
  li.innerHTML += remove;
  return li;
};

addToList.addEventListener("click", () => {
  let todo = inputField.value;
  var li = createTodo();
  console.log(li);
  li.textContent = todo;
  list.appendChild(li);
  inputField.value = "";
});

Answer 1

问题是您这样做会破坏 li 中的现有元素节点：

li.textContent = todo;

您可以改为使用 .insertAdjacentText() 在不丢失元素节点的情况下附加新的文本节点。

li.insertAdjacentText("beforeend", todo);

此外，通常使用 += 和 .innerHTML 会导致问题。这在您的代码中还算不错，但是有更好的方法，例如使用 .insertAdjacentHTML().

而且多次插入似乎比需要的更冗长。我会这样做：

const createTodo = () => {
  const li = document.createElement("li");
  li.insertAdjacentHTML("beforeend", `
    <button class='up'>Up</button>
    <button class='down'>Down</button>
    <button class='remove'>Remove</button>
  `;
  return li;
};

然后为什么不让您的函数接收 todo 文本作为参数？然后您可以使用字符串插值使其变得非常简单：

const inputField = document.querySelector("input.inputField");
const addToList = document.querySelector("input.addToList");
const list = document.querySelector("div.list");

const createTodo = (todo) => {
  const li = document.createElement("li");
  li.insertAdjacentHTML("beforeend", `
    <button class='up'>Up</button>
    <button class='down'>Down</button>
    <button class='remove'>Remove</button>
    ${todo}
  `;
  return li;
};

addToList.addEventListener("click", () => {
  list.appendChild(createTodo(inputField.value));
  inputField.value = "";
});

使用空 innerHTML 创建元素 return 元素的回调函数

Callback function that creates elements return element with empty innerHTML

javascript

callback

innerhtml

dom-events