Использование DOM для добавления новых строк в абзаце

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)

Я пытаюсь создать div с помощью class = "demo", а затем добавить дочерний узел, который является абзацем к нему.Абзац будет иметь 100 строк, но каждая 5-я строка будет иметь другое значение.

Эта часть совсем не сложная, часть, в которой я запутался, - это когда я добавляю разрыв к абзацу, после добавления каждой строки разрыв фактически не работает.Вместо этого разрыв обнаруживается в конце цикла (как видно из инспектора).Любое понимание будет оценено.Спасибо.

Answer 1

Вы только каждый создаете один br - посмотрите, как его создание находится вне цикла, а не внутри цикла.Когда вы вызываете appendChild с элементом, который уже существует в DOM, элемент удаляется из своего предыдущего местоположения и добавляется к новому родителю.

Создайте <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)

Answer 2

Вам нужно создать уникальный элемент <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)