.InnerHTML Not working properly in Internet Explorer

javascript html string internet-explorer innerhtml

26,361

Solution 1

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';

Solution 2

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

Solution 3

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;

Solution 4

<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

Solution 5

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.

View more solutions

26,361

Author by

Mayur

"Two roads diverged in a wood, and I - I took the one less traveled by, and that has made all the difference."

Updated on July 19, 2022

Comments

Mayur almost 2 years
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