在DOM加载时使用JavaScript多次追加div

Question

我想在parent_element中使用Javascript在DOM加载时多次添加在变量上定义的HTML child_elementdiv。

欲望输出:

<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

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

基本流程为:

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

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

Answer 3

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

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

点击按钮可以调用addNewDivElement函数。如下所示:

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