在 JavaScript 中附加多个项目

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 中这样做

你可以在 JavaScript 中使用 append 方法。

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

您可以更改此代码

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

自

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

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

但是，如果您确实需要将所有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类似于将它们附加到该元素。

按@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);
  };
}

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

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

更新 – 2020 年 6 月

现在大多数当前浏览器都支持append和"传播运算符"。

上面的调用可以重写为：

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

让我们试试这个：

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

您需要附加几个子项？只需用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.

您可以使用createContextualFragment，它返回从字符串创建的documentFragment。如果您必须一起构建和附加多个Element Node，这是完美的，因为您可以添加所有内容而不会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)
// ...

您可以将元素分组到单个 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（） 只使用一次。

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

您可以简单地使用它分别附加多个项目，如下所示：

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

如果使用内置的参数对象，则可以编写自己的函数

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)

这里还有一个帮助函数，它使用@Slavik答案中介绍的片段技术，并将其与 DOMParser API 合并：

function createHtmlFromString(stringHtml) {
  const parser = new DOMParser();
  const htmlFragment = document.createDocumentFragment();
  const children = parser.parseFromString(stringHtml, "text/html").body
    .children;
  htmlFragment.replaceChildren(...children);
  return htmlFragment;
}

现在要用它附加多个子项，您可以使代码更具可读性和简短性，例如：

  const htmlFragment = createHtmlFromString(`<div class="info">
      <span></span>
      <h2></h2>
      <p></p>
      <button></button>
    </div>
    <div class="cover">
      <img />
    </div>
  `);

这里也是这些在行动中使用的工作示例：示例链接。

注意1：您也可以在上述标签中添加文本内容并且可以工作，但如果它是来自用户的数据（或从API获取的数据），则最好不要信任它以提高安全性。相反，首先使用上面的函数制作片段，然后执行以下操作：

  htmlFragment.querySelector(".info > span").textContent = game.name;

注意2：不要使用innerHTML插入HTML，这是不安全的。

快速修复

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

伙计们，我真的建议你使用这个。

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

由于您不能一次附加多个子项。我觉得这个看起来更好。

动态向网页添加元素的好方法。此函数接受 3 个参数，1 个是可选的。包装器会将父元素及其元素包装在另一个元素中。动态创建表时很有用。

  function append(parent, child, wrapper="") {
    if (typeof child == 'object' && child.length > 1) {
      child.forEach(c => {
        parent.appendChild(c);
      });
    } else {
      parent.appendChild(child);
    }
    if (typeof wrapper == 'object') {
      wrapper.appendChild(parent);
    }
  }

补充一点，如果你想在你的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>`;