CODEWITHSUNDEEP
javascriptcross-browseropera
marcgg
marcgg

Reputation: 66535

.innerHTML opera issue?

I'm trying to do :

document.getElementById("header-text").innerHTML = "something interesting";

It's working fine with every browser except Opera (I'm running the latest version).

Browsing the internet I found people saying that Opera does not support innerHTML. That doesn't sound right.

Any pointers?

Thanks

Edit: Here is the id I'm trying to get

<div id="header-text" class="picture-text">
          <!--[if gt IE 5]>ugly hack<![endif]-->
          Some text generated server side
         <!--[if gt IE 5]>ugly hack<![endif]-->
</div>

Edit2: I have the same issue with :

<div id="header-text" class="picture-text">
          Static text
</div>

Edit3:

<body onload="intialize();">


function intialize() {
    operaHeaderFix();
}


function operaHeaderFix(){
    if(window.opera) {
        /*opera specific action*/ 
        document.getElementById("picture-line-wrapper").style.position="relative";
        document.getElementById("picture-line-wrapper").style.top="0px";
        document.getElementById("picture-line-wrapper").style.marginTop="-230px";
        document.getElementById("picture-line").style.padding="1px";
        document.getElementById("header-text").innerHTML = "<div style='margin:220px 0px 0px 20px;'>"+document.getElementById("header-text").innerHTML+"TEST</div>";
    }
}

Edit4: If I remove the if(window.opera), it will run fine in FF and IE

Upvotes: 1

Views: 1832

Answers (3)

Shawn
Shawn

Reputation: 9472

I ran into a somewhat related issue and found it to be related to HTML encoded values. For example, when the innerHTML contained "&nbsp;" instead of a space, the innerHTML would come back slightly different (which I confirmed by testing the length of the innerHTML).

Here is what I found when trying to get the innerHTML of a tag that contained a single DIV wrapping an encoded non-breaking space (<div>&nbsp;</div>):

<div> </div>

The example above shows how Opera 10.26 would return innerHTML, and when I checked the length it would return 12 in Opera

<div>&nbsp;</div>

This is how all other browsers I used would return innerHTML (IE6/7/8, Firefox 3.x, Chrome, etc.), and when I checked the length it would return 17 in all these other browsers.

Upvotes: 2

scunliffe
scunliffe

Reputation: 63676

FOUND THE ISSUE:

The wrapping node was not properly closed.

<div att1="value" att2="value"
  <div id="header-text">...</div>
</div>

AFAIK, FF and IE were politely fixing the tag... but Opera wasn't, thus the child DIV wasn't really an element in the DOM.

Should work fine. What is the element with the id "header-text"? Are you sure there is only one match, and it has editable content?

Can you post some of the markup so we can test?

From PPK's site, there doesn't seem to be any Opera issues: http://www.quirksmode.org/dom/innerhtml.html

Update: Running this code in Opera 9.6.4 on XP works fine for me.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>innerHTML test</title>
<script>
  function doIt(){
    document.getElementById("header-text").innerHTML = "something interesting";
  }
</script>
</head>
<body>
  <div id="header-text" class="picture-text">
    Static text
  </div>
  <input type="button" value="Change It" onclick="doIt();"/><br/>
</body>
</html>

Upvotes: 2

TJ L
TJ L

Reputation: 24472

Edit: How are you calling this function? Are you calling it in the document <head>, at the end of the <body>, are you using window.onload?

innerHTML is not a w3c-valid attribute (it will be in HTML 5). It was created by Microsoft and is just supported by most other browsers for compatibility reasons.

That said, I believe Opera does support innerHTML, however some googling suggests that it is broken in certain versions. Try updating your version of Opera and see if it works then.

Upvotes: 0

Related Questions