logo标签列表

JavaScript中如何追加多个项目

javascripthtmlappendchild
52

我有以下函数，尝试找到更好的方式使用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()中？

可能是https://dev59.com/VmHVa4cB1Zd3GeqPlEIE的重复问题。 - Shakespeare
15个回答
1

此外，这里有一个辅助函数，它使用了@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，它是不安全的。

0

大家好，我非常推荐你们使用这个。

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

由于您无法一次附加多个子元素，我认为这个看起来更好。

0

很好的动态向网页添加元素的方法。该函数需要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);
    }
  }

0

这是一个快速修复

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

我想补充一点，如果你想在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>`;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接