Best Practice Chapter Question

Mikeos · September 27th, 2010, 04:23 AM

Early on in this chapter it states that you should decouple HTML and JavaScript from one another, and it specifically states this in relation to using innerHtml to insert a chunk of HTML into the page. However later on in the same chapter under the section 'Optimize DOM Interactions' it states you should use innerHtml for DOM manipulation over DOM methods such a createElement and appendChild as it's faster. Doing this however contradicts the previous best practice of decoupling HTML and JavaScript. So which best practice should I stick to?

nzakas · September 28th, 2010, 05:10 PM

This isn't a contradiction: one is talking about performance, the other is talking about maintainability. You definitely shouldn't embed HTML into your JavaScript code - that's absolutely true. That doesn't mean you can use innerHTML, though, it just means you shouldn't keep your HTML in the JavaScript where you're using innerHTML. So instead of this:

Code:

element.innerHTML = "<p>Hello world!</p>";

You would read the HTML string from somewhere else (perhaps via an Ajax call), store it in a variable, and do this:

Code:

element.innerHTML = codeToAdd;