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

【问题标题】：Is it possible with vanilla js to dynamically add a button element next to a text node?vanilla js是否可以在文本节点旁边动态添加按钮元素？
【发布时间】：2019-03-13 20:32:08
【问题描述】：

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

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

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

代码如下：

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 = "&times;";

  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>

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

【问题讨论】：

是的，有可能，但发布的问题似乎根本没有包含any attempt 来解决问题。 StackOverflow 期待您 try to solve your own problem first，因为您的尝试有助于我们更好地了解您想要什么。请编辑问题以显示您尝试过的内容，以说明您在minimal reproducible example 中遇到的特定问题。欲了解更多信息，请参阅How to Ask 并拨打tour。
"文本和按钮需要从 JS 文件中动态插入" - 什么 js 文件？文件中的数据如何表示？ “Hello world”是来自这个 js 文件吗？
vanilla JS 一切皆有可能
仅基于您的示例代码，这似乎与Add text before or after an HTML element 重复。 Stack Overflow 问题应包含问题本身解决问题所需的所有信息，而不仅仅是在外部站点上。
重复的要点是insertAdjacentHTML的使用。你试过用那种方法吗？如果不熟悉，有文档链接。我不确定这有什么帮助。如果您觉得任何评论无用，请单击评论旁边的标记图标并将其标记为此类。黄金法则通常用“对别人做你会做的事”这句话来描述；当我做了一些让志愿者更难回答我提出的问题的事情时，我希望人们会告诉我。

标签： javascript html

【解决方案1】：

DOM 操作可能很昂贵 (jQuery DOM manipulations - performance comparation?)。使用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>

【讨论】：