使用javascript创建动态列表

Question

我已经创建了一个简单的待办事项列表，它接受输入的值并将其放在div中，并将一些类附加到它们，一切都很好，但我如何修复for循环并使其每次工作，并在每个div下添加多个div，而不是更改现有的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
    }

  }
})