Добавление разрыва строки с использованием javascript

Question

Я работаю над заданием для школы. У меня все работает так, как должно быть. Единственное, что не так, - это то, как форматируется вывод. Я не понимаю, почему я получаю выход, отформатированный так, как он есть. Я использую javascript, и я создаю узлы и добавляю их как дочерний элемент. Моя основная цель заключается в том, чтобы каждая часть информации была отформатирована и размещена на ее собственной линии. это моя функция javascript.

function createUserid() 

    { 
    var firstString = window.prompt ("Enter first name", ""); 
      //documentwrite 
       var lower = firstString.toLowerCase(); 
      // firstString.substring(0,4) 
      // firstString.concat 
    var lastString = window.prompt ("Enter last name", ""); 
    var lowlast = lastString.toLowerCase(); 
    var socialString = window.prompt ("Enter social security number without dashes", ""); 

    var ln = lowlast.substring(0,4);  //first 4 of last name 
    var ls = socialString.substring(5,9); //last 4 of social 
    var fs = socialString.substring(0,5); //first 5 of social 
    var fn = lower.substring(0,4);   //first 4 of first name 


      //var user = docoument.write("<p>" + "Username: " + lastString + 
      //var pass = <p>"Password: " + 

      //var myDiv = document.getElementById('here'); 
      //myDiv.innerHTML = ____ ; 


     var e = document.getElementById('info'); 
     var o = document.getElementById('here'); 

     //creating 2 elements: p, br 
     var newPara = document.createElement('p'); 
     var tBR = document.createElement('br'); 

     //prepare text nodes 
     var first = document.createTextNode('First name: ' + firstString); 
     var last = document.createTextNode('Last name: ' + lastString); 
     var social = document.createTextNode('Social Security #: ' + socialString); 
     var userN = document.createTextNode('Username: ' + ln + ls); 
     var passW = document.createTextNode('Password: ' + fs + fn); 

     //put together paragraph    
     newPara.appendChild(first); 
     newPara.appendChild(tBR); 
     newPara.appendChild(last); 
     newPara.appendChild(tBR); 
     newPara.appendChild(social); 
     newPara.appendChild(tBR); 
     newPara.appendChild(userN); 
     newPara.appendChild(tBR); 
     newPara.appendChild(passW); 

     //insert into div id of info 
     document.getElementById('info').appendChild(newPara); 





     o.style.display = 'none'; 
     e.style.display = 'block';  

    } 

это выход я получаю

это как выход должен выглядеть.

Answer 1

Вы добавляете тот же узел снова и снова.

newPara.appendChild(first); 
    newPara.appendChild(tBR); 
    newPara.appendChild(last); 
    newPara.appendChild(tBR); <--- this node gets moved, since you append it again. 
    newPara.appendChild(social); 
    newPara.appendChild(tBR); 
    newPara.appendChild(userN); 
    newPara.appendChild(tBR); <--- this is where tBR will be at last. 
    newPara.appendChild(passW); 

Вместо этого:

var first = document.createTextNode('First name: ' + firstString + '<br/>'); 

Или это:

 newPara.appendChild(first); 
     newPara.appendChild(document.createElement('br')); 
     newPara.appendChild(last); 
     newPara.appendChild(document.createElement('br')); 
................................. 

Документация здесь: https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild

Добавляет узел в конец списка детей указанной паре nt узел. Если узел уже существует, он удаляется из текущего родительского узла , а затем добавляется в новый родительский узел.

Answer 2

Попробуйте это:

var first = document.createTextNode('First name: ' + firstString + '<br>'); 
var last = document.createTextNode('Last name: ' + lastString + '<br>'); 
var social = document.createTextNode('Social Security #: ' + socialString + '<br>'); 
var userN = document.createTextNode('Username: ' + ln + ls + '<br>'); 
var passW = document.createTextNode('Password: ' + fs + fn + '<br>'); 

Answer 3

Если child уже вставлен, element.appendChild(child) удаляет его от того, где это было, прежде чем вставить его в новом месте.

Используйте node.cloneNode(true), чтобы сделать копии ребенка, или просто используйте document.createElement('br') снова и снова (возможно, в цикле, чтобы избежать повторения).