ansaurus

Question

Answer 1

+1 A:

For some reasons I don't know, in most cases modifying outerHTML is not allowed. I am guessing that, this is because when you are modifying the outerHTML of an element you are actually replacing the current element.

IMO, it safer to replace a element than modifying its outerHTML.

In your case, maybe this will suffice:

UPDATES HERE:

<html>
<head><title>Test</title></head>
<body>
<div>
    some content...
    <div id="sub"></div>
</div>
<script type="text/javascript">
window.onload = function(){
    var sub = document.getElementById('sub');
    var txt="<p>Update Complete!</p>";
    sub.innerHTML = txt;

    alert('test 1');

    txt="1 Error:<ul><li>Some Error</li></ul>";
    sub.innerHTML = txt;
}
</script>
</body>
</html>

jerjer 2010-01-11 08:26:33

much hunch is. <ul> and <li> are not created elements that y i got error. but do they not automatically create the said elements??

Treby 2010-01-11 08:30:06

i have error in "sub.innerHTML = txt;" using IE Browser

Treby 2010-01-11 08:37:16

what's the error?, Can you post your updated code?

jerjer 2010-01-11 08:38:16

Message: Object doesn't support this property or methodLine: 5Char: 1Code: 0URI: http://localhost/preview/innerhtml.php

Treby 2010-01-11 08:43:56

Sorry, but localhost will not work here, can you post the code http://pastie.org then send me the link, thanks

jerjer 2010-01-11 08:46:55

i know.. just try it for yourself.. use IE browser though. I just pointing out the error found by IE browser

Treby 2010-01-11 08:49:54

it's working on my end, IE6,IE7 and IE8, there might be something that have caused the error, it would be nicer if we can see your code.

jerjer 2010-01-11 09:04:18

Treby 2010-01-11 09:18:50

please see updated post, It is working on IE6,IE7,IE8, Please note though, It is not advisable to edit the DOM while the page is still loading. DOM manipulation should be done after the DOM Tree has been loaded(DOM Ready) or after the page is load (window.onload).

jerjer 2010-01-11 09:32:15

Thanks for the idea.. you can use innerHTML but with DIV tag.. not P tag..

Treby 2010-01-11 09:43:14

you can also use innerHTML for other elements except for TextNode, Comment Nodes, Most Form Elements, here are some VALID Elements for innerHTML: p,a,span,label,b,div,h1,h2,h3,h4,5,strong,ul,li,table,tr,td,etc...

jerjer 2010-01-11 09:50:33

but it doesn't work with p tag.. try chaging your <div id="sub"> to <p id="sub">i got error same as with my question

Treby 2010-01-11 10:02:15

yes you're right it doesn't work in p tag if you are placing any element which is not valid in side p tag, according to w3c, p is not allowed inside p, this causes the error, p elements cannot be nested

jerjer 2010-01-12 02:14:22

Answer 2

A:

What is your code trying to achieve? In both cases you do:

create a new p element
append the p element to sub (which I assume is an element itself as well)
set the outerHTML of the p element to some text.

You could just as well have done:

create a new textNode with the desired text data
append that to sub's childnodes:

sub.appendChild(document.createTextNode("Update Complete!"));

Or, if sub is empty anyway, simply do:

sub.innerHTML = "Update Complete!";

Roland Bouman 2010-01-11 09:07:34

Text node reads html tag as text. so it doesn't solve my problem. what i want to achieve is to add ang html text to a p element

Treby 2010-01-11 09:18:19

So, just use `sub.innerHTML` then.

Roland Bouman 2010-01-11 10:14:38

ansaurus

tags:

views:

answers:

JAVASCRIPT: IE: outerHTML

related questions