CODEWITHSUNDEEP
javascriptdom
holyredbeard
holyredbeard

Reputation: 21198

Generate text with DOM with less code

I'm working on an application that's printing out some text to the user in HTML with DOM. Below you can see my code and I have some questions regarding it.

  1. Is there another way to create the text below with DOM (without using innerHTML) that needs less code?

  2. What is the best way of making the text bold, eg. "Firstname" (just the text, not the content in the variable)?

Here is my JS:

header.appendChild(headertext);
p.appendChild(header);

var p2 = document.createElement('p');

var br = document.createElement('br');
var text1 = document.createTextNode("Firstname: " + firstname);
p2.appendChild(text1);
p2.appendChild(br);

var br2 = document.createElement('br');     
var text2 = document.createTextNode("Lastname: " + lastname);
p2.appendChild(text2);
p2.appendChild(br2);

var br3 = document.createElement('br');
var text3 = document.createTextNode("Zip code: " + zipcode);
p2.appendChild(text3);
p2.appendChild(br3);

var br = document.createElement('br');
var text4 = document.createTextNode("Phone nr: " + phonenr);
p2.appendChild(text4);
p2.appendChild(br);

square.appendChild(p);
square.appendChild(p2);

Upvotes: 2

Views: 251

Answers (3)

RightSaidFred
RightSaidFred

Reputation: 11327

Here's an alternate way of shortening the main code a bit:

p.appendChild(header).appendChild(headertext);

var p2 = document.createElement('p'),
    data = [ "Firstname: " + firstname,
             "Lastname: " + lastname,
             "Zip code: " + zipcode,
             "Phone nr: " + phonenr ],
    len = data.length;

while( len-- ) {
    p2.appendChild( document.createTextNode( data[len] ) );
    p2.appendChild( document.createElement( 'br' ) );
}
square.appendChild(p);
square.appendChild(p2);

To style the first word, wrap it in the element of your choice. Doesn't require that much more than the code above:

p.appendChild(header).appendChild(headertext);

var p2 = document.createElement('p'),
    data = [ ["Firstname: ", firstname],
             ["Lastname: ", lastname],
             ["Zip code: ", zipcode],
             ["Phone nr: ", phonenr] ],
    len = data.length;

while( len-- ) {
    p2.appendChild( document.createElement( 'strong' ) )
      .appendChild( document.createTextNode( data[len][0] ) );
    p2.appendChild( document.createTextNode( data[len][1] ) );
    p2.appendChild( document.createElement( 'br' ) );
}
square.appendChild(p);
square.appendChild(p2);

JSFIDDLE DEMO

Upvotes: 1

Esailija
Esailija

Reputation: 140220

You would use a templating engine like so:

<script type="text/x-some-random-templating-engine" id="address-template">
    <p>
        Firstname: <?= firstname ?><br>
        Lastname: <?= lastname ?><br>
        Zip code: <?= zipcode ?><br>
        Phone nr: <?= phonenr ?><br>
    </p>
</script>

Then:

document.body.appendChild( RandomTemplatingEngine.parse( "address-template" ).evaluate({
    firstname: "John",
    lastname: "Doe",
    zipcode: 12345,
    phonenr: 123456789
    })
);

You can either create a templating engine yourself or find one on the internet or here

Upvotes: 1

Adam Rackis
Adam Rackis

Reputation: 83358

I would refactor this

var br2 = document.createElement('br');     
var text2 = document.createTextNode("Lastname: " + lastname);
p2.appendChild(text2);
p2.appendChild(br2);

into a helper function:

function appendTextNode(tagToAppend, textValue){
    var br2 = document.createElement('br');     
    var text2 = document.createTextNode(textValue);
    tagToAppend.appendChild(text2);
    tagToAppend.appendChild(br2);
}

And then:

var p2 = document.createElement('p');

appendTextNode(p2, "Firstname: " + firstname);
appendTextNode(p2, "Lastname: " + lastname);
appendTextNode(p2, "Zip code: " + zipcode);
appendTextNode(p2, "Phone nr: " + phonenr);

To answer your second question, to make this text bold, I would create the content like the below

(I know you mentioned not using innerHTML, but I interpreted that as not wanting to use innerHTML in order to dump large, pre-formed html chunks in)

var text2 = document.createElement('span');
text2.innerHTML = textValue;
text2.style.fontWeight = 'bold';
tagToAppend.appendChild(text2);

Upvotes: 4

Related Questions