JavaScript HTML injection efficiency/best practice

Question

I'm looking to inject HTML via JavaScript into a page at work.

What I'd like to know is if injecting a re-write of the page is more or less efficient than injecting snippets throughout the page with methods like getElementById() .

For example:

document.getElementById("Example").innerHTML = '<h2 id="Example" name="Example">Text</H2>'
document.getElementsByClassName("Example").innerHTML = '<H1>Test</H1>'

...etc. Is this more efficient/effective than simply injecting my own version of the entire page's HTML start to finish?

Edit: Per Lix's comment, I should clarify that I likely will be injecting a large amount of content into the page, but it will affect no more than a dozen elements at any time.

Answer 1

If your project can manage it, it could be better to create DOM Elements and append them to the tree .

The big problem with efficiency would be that setting .innerHTML property would first remove all the nodes and only then parse the html and append it to the DOM.

It's obvious that you should avoid removing and the re-appending identical elements, so if you're sure the "Example" elements would always remain on the page, your way of setting them seems to be a nice optimazation.

If you want to optimize it even further, you could parse the html you want to append to nodes and have a function that checks which ones should be appended and which one shouldn't. But be aware that accessing the DOM is costly. Read more about the ECMA-DOM bridge .

Edit: In some cases it might be better to let the browser do the html parsing and injecting through innerHTML . It depends on the amount of HTML you're inserting and the amount you're deleting. See @Nelson Menezes 's comments about innerHTML vs. append.

Answer 2

Depends on the context. If it was only decoration of existing content, then your proposal would suffice. I'd use jQuery anyway, but that's only my preference.

But when injecting the actual content you have two concerns:

• maintainability - Make the structure of your code readable and subject to easy change when you need (and you will need).
• accessibility - When javascript is disabled, then no content will be visible at all. You should provide a link to desired content in <noscript/> tag or ensure accessibility to everyone any other way you prefer. That's a minority of internet users at the moment, but for professional webmasters they make it count.

To address both of above concerns I prefer to use ajax to load a whole page, some part or even plaintext into existing element. It makes it readable, 'cause the content is sitting in another file completely separated from the script. And since it's a file, you may redirect to it directly when javascript is disabled. It makes the content accessible to anyone.

For plain javascript you'd have to use XMLHttpRequest object, like here . With jQuery it's even simpler. Depending on what you need you may use .load , .get or .ajax .

Answer 3

Best practice today is using JQuery Manipulation functions .

Most time you'd use one of this 3 functions :

1. Replace existing HTML node:

   $("div").html("New content");

2. Append a sibling node:

   $("div").append("New content");

3. Remove a node:

   $("div").remove();