Jump to content

innerHTML quirks


Recommended Posts

Would someone please point me to a definition of innerHTML that takes into account the following two quirks? Or perhaps there is no such definition and someone can simply explain to me what is going on here.Thanks for reading this!Quirk 1)

<!DOCTYPE html><html><body><p id="Test1"><b>Test 1 Part A</b>Part B</p><p id="Test2"><b>Test 2 Part A</b><p>Part B</p></p><script>alert( document.getElementById("Test1").innerHTML );alert( document.getElementById("Test2").innerHTML );</script></body></html>

The following code creates two alert boxes that say:

<b>Test 1 Part A</b>Part B

which is what I was expecting. Note that the HTML tag for bold is included.AND

<b>Test 2 Part A</b>

when I was expecting:

<b>Test 2 Part A</b><p>Part B</p>

Note that the output is truncated to where the HTML tag for paragraph begins.Quirk 2)

<!DOCTYPE HTML><html><head><script>function showInnerHTML(){   var myDiv = document.getElementById( "myDiv" );   alert( myDiv.innerHTML );   var myP = document.getElementById( "myP" );   alert( myP.innerHTML );}</script></head><body><p id="myP"><a href="#" onclick="showInnerHTML()"><div id="myDiv">Text 1</div></a></p></body></html>

Clicking on the link brings up two alert boxes that say:

<a href="#" onclick="showInnerHTML()">Text 1</a>

when I was expecting

Test 1

. Note that the HTML tag for hyperlink is outside the div not inside.Actually on Internet Explorer 7 this shows "Test 1" as expected. I got the unexpected result on Firefox 10.AND

<a href="#" onclick="showInnerHTML()"></a>

when I was epecting:

<a href="#" onclick="showInnerHTML()"><div id="[url=""]myDiv[/url]">Text 1</div></a>

Note that the div is excluded from innerHTML.

Link to comment
Share on other sites

<p> elements are not allowed to be contained by other <p> elements. It's part of the HTML specification, so the browser interprets it as being one <p> element following the next.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...