我创建了一个简单的待办事项列表,它获取输入的值并将其放在一个 div 中,并将一些类附加到它们上,一切正常,但我如何修复 for 循环并使其每次都能工作并添加多个divs 在彼此之下,而不是改变现有的。 这是我的代码:
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>
我的意思是:
这就是我添加文本时发生的情况,效果很好。但是当我添加另一个文本时,它会覆盖第一个文本而不是添加另一个 div。
答案 0 :(得分: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
}
}
})