2

I have some javascript that looks like this:

var sel = '<option value="{value}" {selected}>{name}</option>';
...
$(index + '_expiry').innerHTML = sel; // $(index + '_expiry) is a select.

This works fine in firefox, but not in Internet Explorer - not even IE9.

There is already a solution to this problem that involves creating new elements in the DOM rather than changing the innerHTML.

Is it wrong to insert new elements into a page by manipulating .innerHTML? I use the innerHTML approach all over my site and it is easy. It works in IE for simple elements like .div too.

Though IE is often annoying to work with, the newer versions have a stricter javascript parser that is probably more correct - for instance, it doesn't like an array created as ['a','b','c',].

So, is it bad, inefficient, unreliable, or similar to use .innerHTML to create new HTML elements in the DOM? Should I use it for only inserting plain text? Or is this just IE benig stubborn?

Community
  • 1
  • 1
Oliver
  • 11,297
  • 18
  • 71
  • 121
  • 1
    `the newer versions have a stricter javascript parser that is probably more correct - for instance, it doesn't like an array created as ['a','b','c',]` Actually that's explicitly _incorrect_; `[ECMA-262: A.3]` allows the trailing comma. – Lightness Races in Orbit Jan 27 '12 at 16:55
  • I would love to see this moved over to the programming stackexchange... I've been wondering this too. – Julian H. Lam Jan 31 '12 at 02:08

3 Answers3

3

So, is it bad

Subjective

inefficient

Usually more efficient then the alternatives in terms of run time. The cost comes from making sure the strings are properly constructed.

unreliable

Browsers are consistent (although not always with other browsers), so you can rely on decently tested code.

Or is this just IE benig stubborn?

IE doesn't like editing the insides of certain elements (tables and select elements in particular).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

You are using jQuery and not using it at the same time. Just use jQuery:

$(index + '_expiry').html('<option value="{value}" {selected}>{name}</option>');
Blender
  • 289,723
  • 53
  • 439
  • 496
  • 1
    Once again demonstrating why `$` is not a [good variable/function name](http://en.wikipedia.org/wiki/Self-documenting). – Quentin Jan 27 '12 at 16:55
  • @Quentin I thought about including the 'mootools' tag, but it wasn't really relevant to the main thrust of the question, so I didn't. – Oliver Jan 27 '12 at 16:55
  • 2
    @Quentin That's why we have question tags and don't answer questions based on unverified assumptions. – millimoose Jan 27 '12 at 16:56
  • @Oliver: Then you should have abstracted it away and replaced its usage with that of `document.getElementById` – Lightness Races in Orbit Jan 27 '12 at 16:58
  • @Blender Library differences aside, does JQuery's `.html` method solve this problem for IE? – Oliver Jan 27 '12 at 16:59
  • @Oliver What jQuery would do here is make the code that constructs a DOM fragment and inserts that into the – millimoose Jan 27 '12 at 17:23
1

innerHTML is perfectly fine if your code is actually correct. The point of using DOM manipulation is that it's impossible to create badly formed HTML because of a typo or because, say, the value of whatever goes into the {name} placeholder contains HTML syntax. It's considered better because it helps prevent bugs – this is probably a wash when you're generating chunks of HTML as small as one simple tag.

millimoose
  • 39,073
  • 9
  • 82
  • 134