如何使用 JavaScript 多次附加 div

Question

我想使用 Javascript 在 parent_element 內的變量上定義多次附加 HTML child_element div。

願望輸出：

<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的屬性中檢索您想要的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>