1

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.

David Metcalfe
  • 2,237
  • 1
  • 31
  • 44
  • This all depends on how many changes you're making. Without an exact number or more details it would be 100% opinion based. – Lix Mar 08 '14 at 10:46
  • @Lix Fair point. I've amended the question. – David Metcalfe Mar 08 '14 at 10:49
  • It's funny to me because we see so many posts where the OP used Java to speak about JavaScript (or the other way around) :) – Lix Mar 08 '14 at 10:50
  • 1
    A reflow is a reflow (at least in theory), so what's important is to change the DOM as seldom as possible, and that means injecting everything at once, but it does not mean you should replace elements that aren't changed just to replace them. – adeneo Mar 08 '14 at 10:52
  • Well, the first snippet works (but creates a duplicate id) while the second throws an error (have you even tried them?). So what is your question? – Bergi Mar 08 '14 at 10:53
  • 1
    This is not an answer to your question, but if you want to address performance and maintainability you might want to look at ReactJS: https://www.youtube.com/watch?v=x7cQ3mrcKaY – Nelson Menezes Mar 08 '14 at 11:14

3 Answers3

6

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.

TastySpaceApple
  • 3,115
  • 1
  • 18
  • 27
  • 1
    "It's always better" is not always true. :-) Performance (and maintainability) will depend on the situation. Browsers' HTML parsers are pretty good. See http://stackoverflow.com/questions/18393981/append-vs-html-vs-innerhtml-performance – Nelson Menezes Mar 08 '14 at 11:26
  • Very true, It's related to the ECMA-DOM bridge. I thought about it while writing, but decided no to include the explanation. All in all - everything is project-dependant. But I agree, I should revise to avoid this deterministic statement. – TastySpaceApple Mar 08 '14 at 13:23
1

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.

Krzysztof Jabłoński
  • 1,890
  • 1
  • 20
  • 29
1

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

setec
  • 15,506
  • 3
  • 36
  • 51