I am a complete newbie to javascript and had a question about innerHTML and receiving the "Object does not support this method or property" error in IE.
Code:
<script type="text/javascript">
function changeText(){
document.getElementById('boldPart').innerHTML = 'New';
}
</script>
<p>Here it is: <b id='boldPart'>old</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
The script quoted above works fine when I put it in a simple text file and run it in IE. If, however, in a more complex example with a form and several div's and buttons, if I move the element with id "boldPart" to a different part of the HTML, I get the "Object does not support this method or property". I have checked that the element does exist at the time of the callback function execution, so I have no idea why the object would not support using the innerHTML property.
In your example, the id belongs to a <b> tag, which contains HTML inside. When you move it to another part of the HTML, is it still a <b> tag, or the kind of tag that can contain HTML? Or is the id applied to something else, like an input or other form element?
pretty much what wolf said, i had this problem before, certain elements will not support innerHTML, tables for instance (the <table>,<tbody>, and <tr> tag, but <td> will)some elements do not have an innerHTML, like a textNode for instance (ie and firefox will throw a wobbly over this, unless you made the textNode with document.createElement("textNode") then it doesnt mind, i think its a different kind of text node then though)
innerHTML is not a standard DOM method. Even it is crossbrowser, innerHTML was introduced by IE. Paradoxically enough, exactly for IE innerHTML has some limitations: it works as a read-only property in case of TABLE,TABLE's elements, and several other tags (COL, TITLE, ...). See also: http://msdn.microsoft.com/en-us/libr...8VS.85%29.aspx
I am a complete newbie to javascript and had a question about innerHTML and receiving the "Object does not support this method or property" error in IE.
Code:
<script type="text/javascript">
function changeText(){
document.getElementById('boldPart').innerHTML = 'New';
}
</script>
<p>Here it is: <b id='boldPart'>old</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
The script quoted above works fine when I put it in a simple text file and run it in IE. If, however, in a more complex example with a form and several div's and buttons, if I move the element with id "boldPart" to a different part of the HTML, I get the "Object does not support this method or property". I have checked that the element does exist at the time of the callback function execution, so I have no idea why the object would not support using the innerHTML property.
Any help would be much appreciated...
According to W3C Standards, elements like: bold; italics; underline and similar, including images and other non containers or inline html elements, can not recieve innerHTML.
For IE4~9Beta, you can use the innerText property method. (which is still not supported widely). Although W3C has accpeted the innerHTML as a standards compliant method mostly because FF adopted it since the beginning has dropped the ball with innerText.
Try to test your element with: alert(object.canHaveHTML) and se if it returns "true" or "false".
[method: IE only!], if it returns "true" -the fault is somewhere else.
In other browsers you can test with canHaveChildren which is closely related to this test and if it returns "true" it should accept innerHTML, but doesn't always tell the truth.
Neither innerHTML nor innerText are standard methods. innerText is IE only. Don't use it. There are DOM methods for replacing the content of the textNodes, like nodeValue and data. XML DOM has also some methods like insertData() and replaceData()
Regarding the text, the general idea is that text nodes should be nested rather in <p>, <span> and <div> elements. <b> and <i> elements are deprecated in favor of <strong> and <em>. But even the latest (along with other font related tags) lose ground in favor of CSS styling. Instead of <b>test</b> now we use <span style="font-weight:bold">text</span> or even better a class instead of a style.
Neither innerHTML nor innerText are standard methods. innerText is IE only. Don't use it. There are DOM methods for replacing the content of the textNodes, like nodeValue and data. XML DOM has also some methods like insertData() and replaceData()
I just came back from W3C - The innerHTML, outerHTML and insertAdjacentHTML are on W3C and will be available on HTML5, which makes them future proof.
3.5 Dynamic markup insertion
...
3.5.5 innerHTML
3.5.6 outerHTML
3.5.7 insertAdjacentHTML()
But they've dropped the ball with html:innerText, which is different from Text content:
TEXT:
"this______<b>is</b>______why!"
innerText:
"this <b>is</b> why!"
innerHTML:
"this is why!"
Regarding the text, the general idea is that text nodes should be nested rather in <p>, <span> and <div> elements. <b> and <i> elements are deprecated in favor of <strong> and <em>. But even the latest (along with other font related tags) lose ground in favor of CSS styling. Instead of <b>test</b> now we use <span style="font-weight:bold">text</span> or even better a class instead of a style.
Speaking of the problem faced by psteinberg, - it is important to point out that:
Inline Elements can't have HTML and even if they would, it will result in a malformed HTML that will not validate and also cause lots of rendering, inconsistencies and other scripting problems.
One can however put a B string inside a SPAN content. But you can never put a block level element inside an inline element. Your page will never validate and your innerHTML function including other DOM methods might just not work.
I was speaking about the present. There were, there are and probably there will be a lot of W3C Recommendations which were, are and will never be implemented in a browser or another. The future looks always bright, but we must deal first with the Present Tense
I was speaking about the present. There were, there are and probably there will be a lot of W3C Recommendations which were, are and will never be implemented in a browser or another. The future looks always bright, but we must deal first with the Present Tense
I totally agree.
On the other hand, the Present Tense fact is that all browsers support the innerHTML method, [according to some wannabe's "illegally"] since decades.
Yet, I see things differently - that is: I don't code for W3C - I code for real world browsers.
The problem here, is the fact that we didn't answer the psteinbergs question!
To that, I can add nothing rather than ask for the exact structure of the html which gave him the aforementioned headache.
I may assume that he was nesting the bold element inside some form object, -nastily!
If this is true, the method may fail -"forms do that" - and the reason why, may happen to be a historical matter.
Yeah--in the real world you really shouldn't use 'innerHTML' to insert elements or text, even though I often use it for 'proof of concept' purposes. (Yes--I'm lazy--I admit it). But there are some workarounds for specific problems nonetheless if the HTML code is written properly (or rather, with potential problems in mind). Its like writing content via innerHTML to a table cell that works in IE. (I don't remember what version it was)--- if you had a <td><span id="whatever">your text here</span></td> you could use innerHTML to write within the table cell by changing the innerHTML of the span element, IIRC.
But for the most part, why bother? I would much rather just use the core DOM methods. I know its not always possible, but my philosophy is: if it doesn't work everywhere don't use it anywhere.
innerHTML and "Object does not support this
Reply With Quote
Originally Posted by psteinberg
Bookmarks