在JavaScript中附加多个项目 [英] Append multiple items in JavaScript

问题描述

我有以下功能，我想找出一个更好的方法来使用 appendChild（）追加多个项目。

I have the following function and I am trying to figure out a better way to append multiple items using appendChild().

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

When the user clicks on Add, each item should look like this:

<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>

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

and I have this function to add these elements:

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（） for listItem 。是否可以将多个项目添加到 appendChild（）？

But you can notice that I am repeating three times the appendChild() for listItem. Is it possible to add multiple items to the appendChild() ?

推荐答案

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

Personally, I don't see why you would do this.

但如果你真的需要更换所有 appendChild（）使用一个语句，您可以将 outerHTML 的已创建元素分配给 innerHTML 的 li 元素。

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 element.

您只需要替换以下内容：

You just need to replace the following:

  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片段。因此，将 outerHTML 的已创建元素分配给 li innerHTML $ c>元素类似于将它们附加到它。

The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. So assigning the outerHTML of the created elements to the innerHTML of the li element is similar to appending them to it.

这篇关于在JavaScript中附加多个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！