Javascript appending; What is considered best practice?

Question

Can anyone explain what is considered the best practice in appending in javascript?

var element = document.createElement('p');
element.innerHTML = 'This is appended' ;
var div = document.getElementById('div');
div.appendChild(element);

or

var div = document.getElementById('div');
div.innerHTML = '<p>This is appended</p>';

I see a lot of people doing it like this in jQuery:

$('#div').append('<p>This is appended</p>');

But i've always done it like this:

var element = document.createElement('p');
element.innerHTML = 'This is appended' ;
$('#div').append(element);

Thank you in advance

Answer 1

if you're using jQuery, absolutely nothing wrong with:

$('#div').append('<p>This is appended</p>');

Its less code and less steps.

Answer 2

IMO, when you're working with a DOM, treat it like a DOM instead of a string.

In other words, don't use markup to create elements or text nodes. Use DOM creation methods.

document.getElementById('div')
        .appendChild(document.createElement('p'))
        .appendChild(document.createTextNode('This is appended'));

---

Microsoft's .innerHTML invention can be tempting, and perhaps useful in a pinch, but I usually avoid it.

You can reduce the verbosity of the methods above with helpers.

Answer 3

I typically build an element using jQuery.

var paragraph = $("<p />", {
  className : "someClass",
  text : "this is appended"
})


div.append(paragraph)

I believe that this approach is preferred to directly injecting HTML because it's less intrusive on the DOM.