在 DOM 已加载上使用 JavaScript 多次追加 div

Question

我想在 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>

Answer 1

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

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

函数addNewDivElement可以通过点击一个按钮来调用。如下所示：

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

Answer 2

您可以创建一个子节点对象并将其附加到循环中的父节点。由于要追加多个子节点，因此可以使用 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);

Answer 3

假设您希望 children 的数量由属性“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>

基本流程是：

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

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

在 DOM 已加载上使用 JavaScript 多次追加 div

Append div multiple times using JavaScript on DOM Loaded

javascript

parent-child

appendchild