Question

在我使用DOM学习/练习时，这可能是一个更基本的问题。但是我有以下内容：

var demo_div = document.createElement("div")
demo_div.classList.add("demo")

var p_div = document.createElement("p")
var br = document.createElement("br")

for(let i = 0; i < 100; i++){
    if (i % 5 == 0){
        var text = document.createTextNode("meow")  
    } 
    else{
        var text = document.createTextNode("woof")  
    }
    p_div.appendChild(text)
    p_div.appendChild(br)
}

demo_div.appendChild(p_div)
document.body.appendChild(demo_div)

我正在尝试创建一个class =“ demo”的div，然后将一个子节点附加到该子节点上。该段落将有100行，但每5行将有一个不同的值。

我对这个部分感到困惑的部分并不难，是当我将中断附加到段落时，在每行附加之后，中断实际上不起作用。相反，中断显示在循环的末尾（如检查器中所示）。任何见识将不胜感激。谢谢。

Answer 1

您需要为每个换行符创建一个唯一的<br>元素要申请。当前，您正在重用相同的<br>元素，这会导致该元素从其最后位置（通过appendChild()）移动到您放置的文本中的下一个点。

考虑在循环结构内添加var br = document.createElement("br")，如下所示：

var demo_div = document.createElement("div")
demo_div.classList.add("demo")

var p_div = document.createElement("p")

for(let i = 0; i < 100; i++){
    if (i % 5 == 0){
        var text = document.createTextNode("meow")  
    } 
    else{
        var text = document.createTextNode("woof")  
    }

    // Create a new br element for each loop iteration, and append it
    // to your div like so:
    var br = document.createElement("br")
    p_div.appendChild(text)
    p_div.appendChild(br)
}

demo_div.appendChild(p_div)
document.body.appendChild(demo_div)

Answer 2

您只在创建一个一个 br-了解它的创建是在循环的外部，而不是内部的循环。当您使用DOM中已存在的元素调用appendChild时，该元素将从其先前位置移除并附加到新的父元素中。

改为在循环内创建<br>，就像在使用text一样：

var demo_div = document.createElement("div")
demo_div.classList.add("demo")

var p_div = document.createElement("p")

for(let i = 0; i < 100; i++){
    var br = document.createElement("br")
    if (i % 5 == 0){
        var text = document.createTextNode("meow")  
    } 
    else{
        var text = document.createTextNode("woof")  
    }
    p_div.appendChild(text)
    p_div.appendChild(br)
}

demo_div.appendChild(p_div)
document.body.appendChild(demo_div)

使用DOM在段落中添加换行符

2 个答案: