adding a line break using javascript

Question

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 enter image description here

this is how the output is supposed to look. enter image description here

DhruvPathak · Accepted Answer · 2013-04-12 08:21:16Z

8

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.

answered Apr 12, 2013 at 8:21

DhruvPathak

43.4k17 gold badges125 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bob Glenn Over a year ago

Oh ok. I understand now about the nodes now. I have already tried what you had suggest, but that does not work. It outputs the actual text <br/> in the line as well

bob Glenn Over a year ago

Your second suggestion works out perfectly. I did not think you could do that for some reason. Thanks for your help!

DhruvPathak Over a year ago

That might be because you were creating text node which will take '<br/>' as a string.

PleaseStand · Accepted Answer · 2013-04-12 08:25:33Z

1

If child has already been inserted, element.appendChild(child) removes it from where it was before inserting it at its new location.

Use node.cloneNode(true) to make copies of the child, or just use document.createElement('br') again and again (possibly in a loop to avoid repeating yourself).

answered Apr 12, 2013 at 8:25

PleaseStand

32.2k7 gold badges72 silver badges96 bronze badges

Comments

suresh gopal · Accepted Answer · 2013-04-12 08:24:15Z

0

Try this:

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

answered Apr 12, 2013 at 8:24

suresh gopal

3,1446 gold badges29 silver badges58 bronze badges

1 Comment

PleaseStand Over a year ago

The asker will end up with a literal <br> in the rendered output.

Collectives™ on Stack Overflow

adding a line break using javascript

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related