I was trying to iteratively change the innerHTML of an Id, like:

document.getElementById("test").innerHTML += "<br />"

and

document.getElementById("test").innerHTML += "<table>" + blahblah + "</table>"

but I found that it didn't necessarily put my tags in sequence.

Of course, this method sucks, and I just changed everything to keep adding to a string, which I assign at the end to the innerHTML of the Id.

My question is:

What exactly is innerHTML doing to the tags I'm inserting, is it deterministic, is it brower-specific?

I was trying to iteratively change the innerHTML of an Id, like:

document.getElementById("test").innerHTML += "<br />"

and

document.getElementById("test").innerHTML += "<table>" + blahblah + "</table>"

but I found that it didn't necessarily put my tags in sequence.

Of course, this method sucks, and I just changed everything to keep adding to a string, which I assign at the end to the innerHTML of the Id.

My question is:

What exactly is innerHTML doing to the tags I'm inserting, is it deterministic, is it brower-specific?

• javascript
• innerhtml

Share Improve this question Follow asked May 19, 2011 at 19:41 Lance RobertsLance Roberts 22.9k3232 gold badges114114 silver badges132132 bronze badges 3

• Pls. give a specific example. WHICH tags does WHAT browser put into WHAT sequence? – Mörre Commented May 19, 2011 at 19:53
• This question is similar to: Why is appending to the innerHTML property bad?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – dumbass Commented Dec 1, 2024 at 12:58
• @dumbass, that question does not answer my question, though it does have good information. KooiInc's answer is a good and effective answer for what I wanted to know. – Lance Roberts Commented Dec 3, 2024 at 3:56

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

In my experience most of the time a browser tries to correct the HTML¹ before injecting it into the DOM. If you wanted to build a <ul> this way:

someElement.innerHTML += '<ul>';
someElement.innerHTML += '<li>some li</li>';
someElement.innerHTML += '<li>some other li</li>';
someElement.innerHTML += '</ul>';

In for example Chrome that would have resulted in:

<ul></ul>
 <li>some li</li>
 <li>some other li</li>
<ul></ul>

So, innerHTML can give unpredictable results, because every time you use it, the HTML is corrected by the browser (and browsers differ in the way they do it too). This is especially true for table/table elements (and even more especially so in IE (MS invented innerHTML by the way;)). If you want your html to be absolutely the way you intended it, stick to DOM methods (createElement/appendChild etc.), or first build up a string of the plete element you want to insert using innerHTML, then insert it, in other words, don't use innerHTML with strings containing inplete HTML.

To be plete I cite from PPK's quirksmode:

If you remove elements through innerHTML in IE, their content is wiped and only the element itself (i.e. opening and closing tags) remain. If you want to remove nodes that you may want to reinsert at a later time, use DOM methods such as removeChild()

¹ more technical: I think every browser applies its own HTML fragment parsing algorithm.

Although innerHTML is not part of the w3c DOM, it is supported by all browsers. Originally it just appended the string as-it-is to your element. All major browsers however modify your string and make the string a valid html markup. This is browser specific and not explicitly defined in any official standard. I like the way Mozilla explains the workings of innerHTML.

InnerHTML isn't doing anything, but the browser is free to change things around however it likes. You can see this happening if you open a page in Firefox and open Firebug along with it. When you view your HTML, you might find that some elements are not even there anymore.

Firefox's most surprising action, to a newer, is to change all HTML to what appears to be XHTML.

As to your method, I don't think it sucks at all. I think it's pretty cool, in fact. So thanks!

And have an upvote for that :-)

I encountered a similar problem very recently. As there was barely any useful documentation available, I had to learn by experience. Here goes.

Browsers seem to be parsing innerHTML as soon as any amendment is made. Through such parsing, any invalid HTML snippet will be rejected / added to and made into a valid snippet!

Moral of the story: Whenever you are modifying innerHTML, ensure that the HTML you are inserting is valid. Thus, ...innerHTML += "<table> ... </table>" should work fine but ...innerHTML += "<table>"; ... .innerHTML += "<\table>" would probably result in unexpected behavior.

This is happenning because in the latter case, as soon as you insert a <table>, the browser parses the string and adds a plete node (thus pleting your inplete code). Hence, anything you add later would appear as a sibling of the table node and not as a child as you had originally intended.

In my think you should put text not to doucumet.getElementByID("Name").innerHTML I think you should just put in html. use a sign over ~ it is if you put in innerHTML something you can get some informations from API. Like me. In script tag. I used console.log and document.getElementById console.log('ID: ' + profile.getId()); console.log('Name: ' + profile.getName()); document.getElementById("Name").innerHTML =+profile.getName()+`