是否可以使用 vanilla js 在文本节点旁边动态添加按钮元素？

Question

对于待办事项列表，我试图动态添加一个按钮作为列表元素的子元素和文本节点的兄弟元素，如下所示。

<ul>
  <li>Hello world <button>X</button></li>
</ul>

无序列表在 HTML 文件中，但列表、文本和按钮需要从 JS 文件中动态插入。 如果不将文本包装在 ap 标签中，这可能吗？

这是代码：

 const todoInputEl = document.querySelector(".todo__input"); const todoListEl = document.querySelector(".todo__list"); const todoItemEls = document.querySelector(".todo__item"); const deleteItemEl = document.querySelector(".done"); function addListItem() { todoInputEl.addEventListener("keypress", function(e) { if (e.keyCode === 13) { let newListItem = createListItem(todoInputEl.value); todoListEl.insertBefore(newListItem, todoListEl.childNodes[0]); todoInputEl.value = ""; } }) } function createListItem(text) { const deleteButton = document.createElement("button"); const newListElement = document.createElement("li"); const newParaElement = document.createElement("p"); deleteButton.setAttribute("type", "button"); deleteButton.classList.add("delete"); deleteButton.innerHTML = "×"; newListElement.appendChild(newParaElement); newListElement.setAttribute("class", "todo__item"); newParaElement.setAttribute("class", "todo__p"); newParaElement.textContent = text; newParaElement.parentNode.insertBefore(deleteButton, deleteButton.nextElementSibling); return newListElement; } addListItem();

 <main> <div class="container"> <div class="todo"> <div class="todo__header"> <h1 class="todo__title">to dos</h1> <label for="todo input"> <input type="text" class="todo__input" placeholder="enter a thing to do"> </label> </div> <div class="todo__body"> <ul class="todo__list"> </ul> </div> </div> </div> </main>

如您所见，如果文本在 ap 标签内，它就可以工作，但如果它只是一个纯文本节点，我就无法让它工作插入到同一个地方。 我广泛地寻找这样做的例子，但还没有找到。

Answer 1

DOM 操作可能很昂贵（ jQuery DOM 操作 - 性能比较？ ）。 使用innerHTML回避了这一点，在我看来使事情变得更简单。

 const todoInputEl = document.querySelector(".todo__input"); const todoListEl = document.querySelector(".todo__list"); const todoItemEls = document.querySelector(".todo__item"); const deleteItemEl = document.querySelector(".done"); function addListItem() { todoInputEl.addEventListener("keypress", function(e) { if (e.keyCode === 13) { todoListEl.innerHTML += createListItem(todoInputEl.value); } }) } function createListItem(text) { let listTemplate = "<li>{{ToDo}} <button type='button' class='delete'>&times;</button></li>"; return listTemplate.replace("{{ToDo}}", text); } addListItem();

 <main> <div class="container"> <div class="todo"> <div class="todo__header"> <h1 class="todo__title">to dos</h1> <label for="todo input"> <input type="text" class="todo__input" placeholder="enter a thing to do"> </label> </div> <div class="todo__body"> <ul class="todo__list"> </ul> </div> </div> </div> </main>