是否可以使用 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>