在 JavaScript 中附加多个项目

Question

我有以下功能，我试图找出一种更好的方法来使用 appendChild() 追加多个项目。

当用户单击添加时，每个项目应如下所示：

 <li>
  <input type="checkbox">
  <label>Content typed by the user</label>
  <input type="text">
  <button class="edit">Edit</button>
  <button class="delete">Delete</button>
</li>

我有这个功能来添加这些元素：

 function addNewItem(listElement, itemInput) {
  var listItem = document.createElement("li");
  var listItemCheckbox = document.createElement("input");
  var listItemLabel = document.createElement("label");
  var editableInput = document.createElement("input");
  var editButton = document.createElement("button");
  var deleteButton = document.createElement("button");

  // define types
  listItemCheckbox.type = "checkbox";
  editableInput.type = "text";

  // define content and class for buttons
  editButton.innerText = "Edit";
  editButton.className = "edit";
  deleteButton.innerText = "Delete";
  deleteButton.className = "delete";

  listItemLabel.innerText = itemText.value;

  // appendChild() - append these items to the li
  listElement.appendChild(listItem);
  listItem.appendChild(listItemCheckbox);
  listItem.appendChild(listItemLabel);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);

  if (itemText.value.length > 0) {
    itemText.value = "";
    inputFocus(itemText);
  }
}

但是你可以注意到我重复了三遍 appendChild() 为 listItem 。是否可以向 appendChild() 添加多个项目？

原文由 brunodd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

就个人而言，我不明白你为什么要这样做。

But if you really need to replace all the appendChild() with one statement, you can assign the outerHTML of the created elements to the innerHTML of the li 元素。

您只需要替换以下内容：

   listElement.appendChild(listItem);
  listItem.appendChild(listItemCheckbox);
  listItem.appendChild(listItemLabel);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);

具有以下内容：

 listItem.innerHTML+= listItemCheckbox.outerHTML + listItemLabel.outerHTML + editButton.outerHTML + deleteButton.outerHTML;
listElement.appendChild(listItem);

解释：

元素 DOM 接口的 outerHTML 属性获取描述元素（包括其后代）的序列化 HTML 片段。因此，将已创建元素的 innerHTML outerHTML 元素的 li 类似于将它们附加到它。

原文由 cнŝdk 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 DocumentFragment 来完成。

 var documentFragment = document.createDocumentFragment();
documentFragment.appendChild(listItem);
listItem.appendChild(listItemCheckbox);
listItem.appendChild(listItemLabel);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
listElement.appendChild(documentFragment);

DocumentFragments 允许开发人员将子元素放置在任意的类节点父元素上，允许在没有真正根节点的情况下进行类节点交互。这样做允许开发人员生成结构，而无需在可见 DOM 中这样做

原文由 Slavik 发布，翻译遵循 CC BY-SA 3.0 许可协议