adding a line break using javascript

html, javascript

Solution

You are appending same node again and again.

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);

Instead do this :

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

Or this :

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

Documentation here : https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild

Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.

Problem

I am working on an assignment for school. I have everything working the way it should be. The only thing that is wrong is how the output is formatted. I am not understanding why I am receiving the output formatted the way it is. I am using javascript, and I am creating nodes and appending them as a child element. My main goal is for each piece of information to be formatted and placed on its own line. this is my javascript function. ``` 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'; } ``` this is the output I am receiving this is how the output is supposed to look.

Original source