Succesive br Elements

Question

function formatResults(){

    $("#answersToSearch").empty();
    var i=0;
    for(;i<answers[1].length;i++){

      var title=document.createTextNode(answers[1][i]);
      var desc=document.createTextNode(answers[2][i]);
      var newLine=document.createElement("br");

      document.getElementById("answersToSearch").appendChild(title);
      document.getElementById("answersToSearch").appendChild(newLine);

      var newLine=document.createElement("br");
      document.getElementById("answersToSearch").appendChild(newLine);

      document.getElementById("answersToSearch").appendChild(desc);
      var newLine=document.createElement("br");
      document.getElementById("answersToSearch").appendChild(newLine);
      var newLine=document.createElement("br");
      document.getElementById("answersToSearch").appendChild(newLine);


    }  

}

Initially, I tried using the same variable 'newLine' representing a new line for carriage returns. But it works only once. Then i tried declaring it each time i used a carriage return and it worked. So my question is - Why do i have to declare a new 'br' element each time to add a carriage return. Or is there something that I have done wrong???

Answer 1

Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position

(Emphasis added) Source

appendChild() does not clone the node. You could clone the node yourself:

appendChild(newLine.cloneNode(true));