.InnerHTML Not working properly in Internet Explorer

Question

I wanted to assign a link tag to innerHTML of a HTML control. But this is not working properly in Internet Explorer. However when I try to assign anything other than <link> & <style> tags it works fine.

<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader");
  x.innerHTML='<link \"http://test.com/css/template.css\" rel=\"stylesheet\"><div>abc</div>';
  alert(x.innerHTML);
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">Click me!</h1>

</body>
</html>

Also, If I change sequence of <div> tag and <link> tag above it works fine in Internet Explorer also.

x.innerHTML='<div>abc</div><link \"http://test.com/css/template.css\" rel=\"stylesheet\">';

Please suggest! Thanks.

EDIT: This is a bug in Internet Explorer with ExtJs. More information at

http://www.sencha.com/forum/showthread.php?30110-internet-explorer-autoLoad-css-not-applied

What do you actually want to accomplish? Give exact finished html sample how it should look when everything is done successfully. You are trying to insert into body of html document for what purpose? Do you want inline css, or inline — Ivan Ivanic, Mar 20 '11 at 11:03

KooiInc · Answer 1 · 2011-03-25T08:45:47.073

innerHTML won't work in IE, but using DOM methods it will:

function getValue()
{
  var x=document.getElementById("myHeader")
    , link = document.createElement('link')
    , div = document.createElement('div');
  x.innerHTML = '';
  x.appendChild(link);
  x.appendChild(div);
  div.innerHTML = 'abc';
  link.href = 'http://test.com/css/template.css';
  link.rel = 'stylesheet';
  alert(x.innerHTML);
}

Although the reference states a link tag may only appear in the header, interesting enough the style link does work if you use the code I provided, in all browsers I tried (IE, firefox, chrome). See this jsfiddle (where I used a real css-href from test.com ;-)

If you however want to place the link in it's rightful section (<head>), use:

var header = document.getElementsByTagName('head')[0];
  , link = document.createElement('link');
header.appendChild(link);
link.href = 'http://test.com/css/template.css';
link.rel = 'stylesheet';

score 8 · Answer 2 · edited Mar 09 '11 at 09:43

8

For starters, you are missing an href attribute on your <link>.

<link href=\"http://test.com/css/template.css\" rel=\"stylesheet\" />

And don't put link and style tags into the <body>. Inject them into the <head>

  var link = document.createElement("link");
  link.href = "http://test.com/css/template.css";
  link.rel = "StyleSheet";
  document.head.appendChild(link);

edited Mar 09 '11 at 09:43

oezi

51,017
10
98
115

answered Mar 09 '11 at 09:41

selbie

100,020
15
103
173

Oops! Sorry..missing href was a typo..Actually I get a HTML as a string which has links and other HTML in it. Injecting links only for IE becomes overhead. – Mayur Mar 09 '11 at 09:46
That being said, create an off screen div element and set the .innerHTML property on that. Then setTimeout(callback,1) to let the element get realized. In the callback function, extract all the children of the div. Reparent the elements on the document.head or within the
tag in your body. Use removeChild and appendChild methods as appropriate.
– selbie Mar 09 '11 at 09:53

score 3 · Answer 3 · edited Aug 05 '11 at 09:45

A lot of people are missing the point here. What he is trying to do ( after fixing the typo where the href attribute is missing ) works in any other browser.

IE 8 and below have a bug where if the first element in the text when setting innerHTML is a tag (maybe others), it is ignored. If you just put a space or newline or other tag first, it works.

He even discovered this when he said putting the <div> first fixes it.

It isn't valid, but that's how you fix it.

Edit: in other words: foo.innerHTML = "\n" + yourHtmlWithLinkInIt;

Ivan Ivanic · Answer 4 · 2011-08-15T05:54:08.443

2

<link> can only be contained in <head>.

This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times.

reference: http://www.w3.org/TR/html401/struct/links.html#edef-LINK

edited Aug 15 '11 at 05:54

answered Mar 09 '11 at 09:37

Ivan Ivanic

2,982
1
20
21

`` ain't for hyperlinks. – J-16 SDiZ Aug 05 '11 at 10:01
No kidding? And what did you not understand from my answer? Good day to you, sir ;) – Ivan Ivanic Aug 13 '11 at 17:18
2

The question asked for style-sheet, you suggest using . Who is kidding? – J-16 SDiZ Aug 15 '11 at 01:50

score 1 · Answer 5 · answered Mar 09 '11 at 09:37

1

i think the problem is that the <link> hast to be an empty element. change your code to this:

x.innerHTML='<link \"http://test.com/css/template.css\" rel=\"stylesheet\" /><div>abc</div>';
                                                     // this is the trick ^^^

EDIT: i havn't tested this, but it's the first thing that hurts my eyes.

EDIT2: <link> tags should only occur inside of the <head>-section... i hope you know what you're trying to do.

answered Mar 09 '11 at 09:37

oezi

51,017
10
98
115

Closing style tag doesn't help :( – Mayur Mar 09 '11 at 09:41
The trailing / "self-closing" slash is only necessary for XHTML syntax, which is definitely not relevant when using innerHTML; in HTML syntax, it is neither necessary nor desirable. – mithrandi Mar 26 '11 at 05:44

score 1 · Answer 6 · answered Mar 20 '11 at 12:29

to the set text properly, i would recommend you to go what i generally do. if you have ie 8 then open the html in ie. press f12 to show the developer tool. now in the new window go to script tag. set break point from where your javascript starts. now press on the button start debugging. execute the js function from your by some event or the way it executes. now on the object in the javascripg function, when the break point hits, right click and add watch. expand the object and see, where your earlier text was and where is your new text.

score 0 · Answer 7 · edited Oct 19 '13 at 13:21

0

try

document.getElementById('tblList').outerHTML="ypur html";

edited Oct 19 '13 at 13:21

kleopatra

51,061
28
99
211

answered Oct 19 '13 at 13:09

Kishan Parmar

1
1

score 0 · Answer 8 · answered Mar 25 '11 at 23:57

What exactly are you trying to achieve, as your end goal? As said previously a link tag should really only appear in the <head> of an html document.

JavaScript can be a tricky thing in its vanilla flavour, you're better off using a framework, my personal favourite is MooTools though I hear JQuery is pretty good, but MooTools has OOP (for real programmers - tehe).

This'll allow you to do a lot more, and probably get to your end goal, if you let me / us know then you should get a more direct answer to your issue.

Stefan Steiger · Answer 9 · 2011-03-26T14:22:48.223

The thing is it works in FireFox and Google Chrome, but not in IE.

This is, because you cannot set the innerHTML tag of InternetExplorer with a string, if the string is more than text, ie a HTML element.

I experienced this trying to dynamically populate a ComboBox into a table cell with AJAX...

The solution is to use JQuery.
Then you can do:
$("#YourElementID").html('<link \"http://test.com/css/template.css\" rel=\"stylesheet\" /> <div>abc</div>');
and JQuery will do the DOM stuff, that selbie and KooiInc describe, for you.

score 0 · Answer 10 · answered Feb 07 '12 at 10:58

Found different and easy solution here for "link" and "sytle", but "script" needs to be added using appendChild. Very much similar to what Vectorjohn has said, also provides more references.

http://allofetechnical.wordpress.com/2010/05/21/ies-innerhtml-method-with-script-and-style-tags/

.InnerHTML Not working properly in Internet Explorer

10 Answers10

tag in your body. Use removeChild and appendChild methods as appropriate.

Linked