Geek Answers Handbook

.InnerHTML Does Not Work Properly in Internet Explorer

I wanted to assign the innerHTML link tag to the HTML control. But this does not work properly in Internet Explorer. However, when I try to assign anything other than the <link> and <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 the sequence of the <div> tag and the <link> above, it works fine in Internet Explorer as well.

 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. Additional information on

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

+6
javascript string html internet-explorer innerhtml
source share
10 answers

innerHTML will not work in IE, but using the 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 link indicates that the link tag can only be displayed in the title, it’s interesting enough that the style link works if you use the code I provided in all the browsers I tried (IE, firefox, chrome). See this jsfiddle (where I used real css-href from test.com ;-)

If you want to place the link in this legal 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';
+10
source share

Firstly, your <link> missing the href attribute.

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

And do not put link tags and style tags in <body> . Add them to <head>

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

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

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

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

+3
source share

Many people lack meaning here. What he is trying to do (after fixing a typo where the href attribute is missing) works in any other browser.

IE 8 and below have an error where, if the first element in the text when installing innerHTML is a tag (possibly others), it is ignored. If you just put a space, a new line or another tag first, it will work.

He even discovered this when he said that he installed the <div> .

Not valid, but how do you fix it.

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

+3
source share

I think the problem is that <link> should 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 have not tested this, but this is the first thing that hurts me.

Tags

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

+2
source share

in the given text correctly, I would recommend you go, which I usually do. if you have ie 8 then open html in ie. press f12 to show the developer tool. now in a new window go to the script tag. set a breakpoint where your javascript starts from. Now click on the start debugging button. execute js function from your any event or how it is executed. now on the object in the javascripg function, when the break point hits, right-click and add the clock. expand the object and see where your previous text was and where your new text is.

+1
source share

What exactly are you trying to achieve, how is your ultimate goal? As mentioned earlier, the link tag should really only appear in the <head> html document.

JavaScript can be a complicated thing in your vanilla flavor, you better use the framework, my personal favorite is MooTools , although I heard that JQuery is very good, but MooTools has OOP (for real programmers, this).

This will allow you to do much more and will probably reach your final goal, if you let me / us know, then you should get a more direct answer to your problem.

0
source share

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

This is because you cannot set the innerHTML tag in InternetExplorer with a string if the string is larger than the text, i.e. an HTML element.

I experienced this while trying to dynamically populate a ComboBox in a table cell using 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 selbie and KooiInc talk about for you.

0
source share

Found another and easy solution here for "link" and "sytle", but "script" needs to be added using appendChild. Very similar to what Vectorjohn said, also gives more links.

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

0
source share

to try

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

More articles:


All Articles