在 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);
  }
}

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

Answer 1

您可以使用 DocumentFragment 来完成。

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

DocumentFragments allow developers to place child elements onto an arbitrary node-like parent, allowing for node-like interactions without a true root node. Doing so allows developers to produce structure without doing so within the visible DOM

Answer 2

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

但是如果确实需要用一条语句替换所有的appendChild()，可以将创建元素的outerHTML赋值给li的innerHTML元素.

您只需替换以下内容：

  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 类似于将它们附加到它。

Answer 3

你需要追加几个children？只需使用 appendChildren 将其设为复数即可！

要事第一：

HTMLLIElement.prototype.appendChildren = function () {

  for ( var i = 0 ; i < arguments.length ; i++ )

    this.appendChild( arguments[ i ] );

};

然后对于任何列表元素：

listElement.appendChildren( a, b, c, ... );

//check :
listElement.childNodes;//a, b, c, ...

当然适用于具有 appendChild 方法的每个元素！喜欢 HTMLDivElement.

Answer 4

您可以使用 JavaScript 中的 append 方法。

这类似于jQuery的附加方法，但它不支持IE和Edge。

您可以更改此代码

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

至

listElement.append(listItem,listItemCheckbox,listItemLabel,editButton,deleteButton);

Answer 5

如果您使用内置函数，则可以编写自己的函数 arguments object

function appendMultipleNodes(){
  var args = [].slice.call(arguments);
  for (var x = 1; x < args.length; x++){
      args[0].appendChild(args[x])
  }
  return args[0]
}

然后你可以这样调用函数：

appendMultipleNodes(parent, nodeOne, nodeTwo, nodeThree)

Answer 6

合并@Atrahasis 和@Slavik 的答案：

if (Node.prototype.appendChildren === undefined) {
  Node.prototype.appendChildren = function() {
    let children = [...arguments];

    if (
      children.length == 1 &&
      Object.prototype.toString.call(children[0]) === "[object Array]"
    ) {
      children = children[0];
    }

    const documentFragment = document.createDocumentFragment();
    children.forEach(c => documentFragment.appendChild(c));
    this.appendChild(documentFragment);
  };
}

这接受 children 作为多个参数，或作为单个数组参数：

foo.appendChildren(bar1, bar2, bar3);
bar.appendChildren([bar1, bar2, bar3]);

更新 – 2020 年 6 月

大多数当前浏览器现在都支持 append and the "spread operator"。

上面的调用可以re-written为：

foo.append(bar1, bar2, bar3);
bar.append(...[bar1, bar2, bar3]);

Answer 7

您可以像这样将元素分组到一个 innerHTML 组中：

  let node = document.createElement('li');
  node.innerHTML = '<input type="checkbox"><label>Content typed by the user</label>  <input type="text"><button class="edit">Edit</button><button class="delete">Delete</button>';
  document.getElementById('orderedList').appendChild(node);

那么appendChild()只用了一次

Answer 8

我想补充一点，如果您想为 html 添加一些可变性，您也可以像这样添加变量：

let node = document.createElement('div');
node.classList.add("some-class");
node.innerHTML = `<div class="list">
                  <div class="title">${myObject.title}</div>
                  <div class="subtitle">${myObject.subtitle}
                </div>`;

Answer 9

您可以使用 createContextualFragment，它 return 从字符串创建的 documentFragment。如果您必须一起构建多个 Node 并将其附加到现有的 Element，这是完美的，因为您可以将它们全部添加而没有 innerHTML

的缺点

https://developer.mozilla.org/en-US/docs/Web/API/Range/createContextualFragment

// ...
var listItem = document.createElement("li");
var documentFragment = document.createRange().createContextualFragment(`
    <input type="checkbox">
    <label>Content typed by the user</label>
    <input type="text">
    <button class="edit">Edit</button>
    <button class="delete">Delete</button>
`)
listItem.appendChild(documentFragment)
// ...

Answer 10

让我们试试这个：

let parentNode = document.createElement('div');

parentNode.append(...[
    document.createElement('div'),
    document.createElement('div'),
    document.createElement('div'),
    document.createElement('div'),
    document.createElement('div')
]);

console.log(parentNode);

Answer 11

这是一个快速修复

document.querySelector("#parentid .parenClass").insertAdjacentHTML('afterend', yourChildElement.outerHTML);

Answer 12

伙计们，我真的推荐你们使用这个。

[listItemCheckbox, listItemLabel, editButton, deleteButton]
.forEach((item) => listItem.appendChild(item));

因为您不能一次附加多个子项。我觉得这个更好看。

Answer 13

为什么没有人提到 element.append() 函数？！

您可以简单地使用它分别附加多个项目：

listItem.append(listItemCheckbox, listItemLabel, editButton, deleteButton);

在 JavaScript 中追加多项

Append multiple items in JavaScript

html

javascript

appendchild

更新 – 2020 年 6 月