www.webdeveloper.com
Results 1 to 12 of 12

Thread: innerHTML and "Object does not support this

  1. #1
    Join Date
    Jan 2011
    Posts
    1

    Question innerHTML and "Object does not support this

    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...

  2. #2
    Join Date
    Aug 2009
    Posts
    593
    Tested it on my computer using IE8, Google Chrome and FF3.6.

    No Problems.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>Test</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	</head>
    	<body>
    
    		<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" />
    
    	</body>
    </html>

  3. #3
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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?

    ^_^

  4. #4
    Join Date
    Jun 2010
    Posts
    13
    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)

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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
    Last edited by Kor; 01-28-2011 at 05:18 AM.

  6. #6
    Join Date
    Jan 2011
    Posts
    117
    Quote Originally Posted by psteinberg View Post
    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.

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.
    Last edited by Kor; 01-28-2011 at 11:40 AM.

  8. #8
    Join Date
    Jan 2011
    Posts
    117
    Quote Originally Posted by Kor View Post
    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()

    http://www.w3.org/TR/html5/
    Meaning, it's a future compatible standard.

    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.

    Regards.
    Last edited by Troy III; 01-28-2011 at 11:10 PM.

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Troy III View Post
    Meaning, it's a future compatible standard.
    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

  10. #10
    Join Date
    Jan 2011
    Posts
    117
    Quote Originally Posted by Kor View Post
    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.

    Regards.

  11. #11
    Join Date
    Mar 2009
    Posts
    431
    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.

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    innerHTML is not a bad choice. It is faster than DOM methods. Except that, for compatibility reasons, it must not be used in some cases. That is all

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles