使用javascript創建動態列表

Question

我創建了一個簡單的待辦事項列表，它獲取輸入的值並將其放在一個 div 中，並將一些類附加到它們上，一切正常，但我如何修復 for 循環並使其每次都能工作並在彼此下添加多個 div而不是改變現有的。 這是我的代碼：

    let dynamicList = document.querySelector("#dynamic-list"),
    dynamicDiv = document.createElement("div"),
    dynamicClass = document.querySelector(".dynamic"),
    circle = document.querySelector(".circle"),
    paragraphTest = document.createElement("p"),
    circleTest = document.createElement("div");

input.addEventListener("keypress", function(e){
    value = input.value
    if(e.key == "Enter"){
        for(i=0; i<=dynamicList.children.length; i++){
            dynamicList.insertBefore(dynamicDiv, dynamicClass.nextSibling)
            let sibling = dynamicClass.nextSibling;
            sibling.classList.add("dynamic")
            sibling.appendChild(circleTest)
            circleTest.classList.add("circle")
            sibling.appendChild(paragraphTest)
            paragraphTest.innerHTML = input.value
        }
        
})

    <div id="dynamic-list">
      <div class="dynamic"><div class="circle"></div><p class="paragraph">some dummy text/p></div>
    </div> 

這就是我的意思：

https://imgur.com/a/Zgm48ze

這就是我添加文本時發生的情況，它完美無缺。 但是當我添加另一個文本時，它會覆蓋第一個文本而不是添加另一個 div。

Answer 1

每次要創建該元素時都應該使用 createElement 方法。 只需使用一次，它只會創建一個，因此如果您更改其屬性，您正在編輯第一個元素（唯一一個已經創建的元素）。

所以代碼應該這樣寫：

let dynamicList = document.querySelector("#dynamic-list"),
  dynamicClass = document.querySelector(".dynamic"),
  circle = document.querySelector(".circle");


input.addEventListener("keypress", function(e) {
  value = input.value
  if (e.key == "Enter") {
    const paragraphTest = document.createElement("p"),
      dynamicDiv = document.createElement("div"),
      circleTest = document.createElement("div");
    for (i = 0; i <= dynamicList.children.length; i++) {
      dynamicList.insertBefore(dynamicDiv, dynamicClass.nextSibling)
      let sibling = dynamicClass.nextSibling;
      sibling.classList.add("dynamic")
      sibling.appendChild(circleTest)
      circleTest.classList.add("circle")
      sibling.appendChild(paragraphTest)
      paragraphTest.innerHTML = input.value
    }

  }
})