在加载的 DOM 上使用 JavaScript 多次附加 div [重复]答案

【问题标题】：Append div multiple times using JavaScript on DOM Loaded [duplicate]在加载的 DOM 上使用 JavaScript 多次附加 div [重复]
【发布时间】：2021-10-24 10:32:16
【问题描述】：

我想在 DOM 加载上使用 Javascript 将 HTML child_element div 多次附加在 parent_element 内的变量上。

愿望输出：

<div class="parent_element">
   <div class = "child_element">
   <div class = "child_element">
   <div class = "child_element">
   <div class = "child_element">
   <div class = "child_element">
</div>

【问题讨论】：

您希望这种情况发生在点击事件上还是在 DOM 加载时会出现 5 次或 6 次？
@TBA 我在加载 DOM 时想要这个。
@PrabichShakya，如果您愿意，您可以对您的问题进行细微修改，以添加所要求的说明。然后，人们无需通读 cmets 即可轻松提供答案。只要您不更改任何会使已经给出的答案无效的关键内容。也可以考虑removing fluff。谢谢。

标签： javascript parent-child appendchild

【解决方案1】：

您可以创建一个子节点对象并将其附加到循环中的父节点。由于您有多个要附加的子节点，您可以使用DocumentFragment

const parentNode = document.createElement('div');
parentNode.classList.add('parent_element');
const childNode = document.createElement('div');
childNode.classList.add('child_element');
const fragment = new DocumentFragment();

for(let i=0; i<[*no_of_times_you_want_child_node*]; i++) {
    fragment.appendChild(childNode.cloneNode(true));
}

// finally append dom fragment to parent
parentNode.appendChild(fragment);

【讨论】：

【解决方案2】：

假设您希望通过属性“parent_element 内的变量”定义子项的数量

<div class="parent" children="5"></div>
<script>
const parentEl = document.querySelector(".parent");
const numOfChildren = +parentEl.getAttribute("children");
const fragment = new DocumentFragment();
for (let i=0; i<numOfChildren; i++) {
    const childEl = document.createElement("div");
    childEl.classList.add("child");
    fragment.appendChild(childEl);
}
parentEl.append(fragment);
</script>

基本流程是：

使用类选择器获取对父元素的引用
从名为children 的属性中检索您想要的孩子的数量。这是一个字符串值，因此+ 会将其转换为数字
循环在 DOM 上创建一个新元素，在 appending the child 之前添加所需的类名。

编辑：根据 pilchard 的建议，我已从 abhishek khandait 的答案中合并到 DocumentFragment。

【讨论】：

一个不错的干净答案，但考虑累积新元素并且只在循环后追加一次。要么在一个数组中，然后传播到 append() 中，要么在一个 document.fragment 中

【解决方案3】：

您可以使用 jquery 动态添加新的 div 元素。

   <script> 
        function addNewDivElement() {
            $("#parent_element").append('<div class = "child_element">')
        }
    </script>

函数addNewDivElement可以在点击按钮时被调用。如下所示：

  <button onclick="addNewDivElement()"> 
        Add
  </button>

【讨论】：