时间戳

首页 > 解决方案 > 使用 javascript 创建动态列表

javascript - 使用 javascript 创建动态列表

问题描述

我创建了一个简单的待办事项列表，它获取输入的值并将其放置在 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。

标签： javascripthtml

解决方案

每次要创建该元素时，都应该使用 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
    }

  }
})

推荐阅读