Problem with innerHTML in div for hr tag

Internet Explorer Web Development

DimitriH

I have a html page like this :

<div id="oDiv" contenteditable style="height:200px;width:100%;border:inset #99ccff thin;overflow:auto;">
<p>test <hr > test2</p>
</div>
<input type="button" onClick="oArea.value=oDiv.innerHTML;" value="oDiv.innerHTML">
<textarea id="oArea" style="height:200px;width:100%;border:inset #99ccff thin;">
</textarea>

When I click on the button I receive this in the textarea :

<P>test
<HR>
test2
<P></P>

Why there is a new tag 'p' How I can slove the problem

Thanks in advance,

Dimitri
Top

Re: Internet Explorer Web Development Problem with innerHTML in div for hr tag

unique_username

It will depend on who you ask, whether this is a bug or a feature.

Technically, the HR element, from back in HTML 3.2 was a BLOCK level element, the P element, is an INLINE element, and by the spec, cannot contain a BLOCK level element.

Thus I presume that IE is "trying" to set up the DOM for this page, adjusting as required when it renders the page.

If you change your inner DIV content to: <p>test</p><hr/><p>test2</p> then the DOM will parse correctly.

always keep in mind that IE will "abuse" the markup on the page you create, and return all nodes in UPPERCASE, with standalone attributes, attributes with "spaceless" values not in the proper quotes, and may or may not properly close nodes properly (e.g. very malformed markup)

I would advise you to get the content via DOM methods .childNodes(), .getElementsByTagName(), etc. to ensure you get exactly what the spec says, not what IE renders/thinks it has.


Top

Re: Internet Explorer Web Development Problem with innerHTML in div for hr tag

DimitriH

Thanks, but i have a problem with the exec command.

I have the following page ...

Code Snippet

<html>
<head>
<title> Test DIV </title>
<script>
window.onload=doInit
function doInit(){
//ensure that all document elements except the content editable DIV are unselectable
for (i=0; i<document.all.length; i++)
document.all(i).unselectable = "on";
oDiv.unselectable = "off";
oDiv.focus();
}
</script>
</head>
<body>
Test du div
<div id="oDiv" contenteditable style="height:200px;width:100%;border:inset #99ccff thin;overflow:auto;">
<p></p>
</div>
<div id="internalDiv" style="height:200px;width:100%;border:inset #99ccff thin;overflow:auto;">
<p></p>
</div>
<input type="button" onClick="oArea.value=oDiv.innerHTML;internalDiv.innerHTML=oDiv.innerHTML;oArea2.value=internalDiv.innerHTML;" value="oDiv.innerHTML">
<input type="button" onClick="document.execCommand('InsertHorizontalRule');" value="Insert HR">
<input type="button" onClick="document.execCommand('FontName',true,'Helvetica');" value="Font">
<textarea id="oArea" style="height:200px;width:100%;border:inset #99ccff thin;"></textarea>
<textarea id="oArea2" style="height:200px;width:100%;border:inset #99ccff thin;"></textarea>
</body>
</html>

I make the following sequence :

1. I write in the first div : test 1

2. press Enter

3. I write test 2

4. I select all the texte except the character 2

5. I click on button "Font"

6. I click just before the character 1

7. I click on button "Insert HR"

8. I click on button "oDiv.innerHTML"

9. The content for the two textarea are not the same .... why

When I get the content via DOM methods, I retrieve different content ... I have two times the hr tag and the character 1 from the internalDiv.

I don't understand why

The problem is that I need to make internal copy from div and sometimes I need to predefine the content of the div.

Thanks in advance


Top

Re: Internet Explorer Web Development Problem with innerHTML in div for hr tag

John Sudds - MSFT

I tried your repro, but the two copies are identical. I'm using IE7--perhaps you are not



Top

Re: Internet Explorer Web Development Problem with innerHTML in div for hr tag

Kun Cong - MSFT

When get_innerHTML is called, IE is actually "streaming" the current tree structure in to an HTML stream, in another word, IE is reconstructing HTML from internal tree structure, so there is some change during this process.

First, in DIV1, tree structure is like <P><FONT><HR/></FONT></P>. Because HR is block level element, when reconstructing HTML, it looks that IE changes the output to <P><FONT></P><HR/></FONT><P></P>, and this is why the extra <P></P> came into being.


Top

Re: Internet Explorer Web Development Problem with innerHTML in div for hr tag

DimitriH

Ok, why not but why the execCommand ('InsertHorizontalRule') does the job incorrectly

Because now i have a another problem with this ..
I update the page with this code :

Code Snippet

<html>
<head>
<title> Test DIV </title>
<script>
window.onload=doInit
function doInit(){
//ensure that all document elements except the content editable DIV are unselectable
for (i=0; i<document.all.length; i++)
document.all(i).unselectable = "on";
oDiv.unselectable = "off";
oDiv.focus();
}
function getContent(oNode) {
var result='';
var childNodes = oNode.childNodes;
var childNodesLength = childNodes.length;
for (var i = 0; i < childNodesLength; i++){
result = processNode(childNodes[i], result);
}
return result;
}
function processNode(node, result) {
var i;
var childNodes;
var childNodesLength;
switch (node.nodeType) {
case 1: // ELEMENT
var name = node.nodeName;
result = result+'<' + name;
if (node.canHaveChildren || node.hasChildNodes()) {
result = result+'>';
// childNodes
childNodes = node.childNodes;
childNodesLength = childNodes.length;
for (i = 0; i < childNodesLength; i++){
result = processNode(childNodes[i], result);
}
result = result+'</' + name + '>';
} else {
result = result+' />';
}
break;
case 3: // TEXT
result = result+node.nodeValue;
break;
default:
result = result+'!!nodeType: ' + node.nodeType + 'nodeName: ' + node.nodeName + '!!';
break;
}
return result;
}
</script>
</head>
<body>
Test du div
<div id="oDiv" contenteditable style="height:200px;width:100%;border:inset #99ccff thin;overflow:auto;">
<p></p>
</div>
<div id="internalDiv" style="height:200px;width:100%;border:inset #99ccff thin;overflow:auto;">
<p></p>
</div>
<input type="button" onClick="oArea.value=getContent(oDiv);internalDiv.innerHTML=oDiv.innerHTML;oArea2.value=getContent(internalDiv);" value="oDiv.innerHTML">
<input type="button" onClick="document.execCommand('InsertHorizontalRule');" value="Insert HR">
<input type="button" onClick="document.execCommand('FontName',true,'Helvetica');" value="Font">
<textarea id="oArea" style="height:200px;width:100%;border:inset #99ccff thin;"></textarea>
<textarea id="oArea2" style="height:200px;width:100%;border:inset #99ccff thin;"></textarea>
</body>
</html>

The difference is now after the copy into the internalDiv, i retrieve the content via DOM Explorer...

Surprise ... in the second area, the hr tag is present twice and the character 1 also.

Why ...


Top

Re: Internet Explorer Web Development Problem with innerHTML in div for hr tag

David

Before spending any more time trying to debug this immediate problem, I'd advise studying the following:

1. Use a valid DOCTYPE before your HTML document, and validate all markup using the w3c's validator against the doctype. Without a doctype or consistent markup, the browser is free to use whatever interpretation it wants of your markup, which isn't always going to be consistent to you. This is called "quirksmode" and you have to get out of it before you can get any futher with this.

2. Study and use w3c DOM methods instead of this proprietary IE JScript/DOM interface. Use document.getElementById('oDiv') instead of oDiv. Use documents.getElementsByTagName('*') instead of document.all. Don't include so much script in inline event handlers; instead define functions in a script tag and invoke them.

Starting with these 2 things will make your code much easier to read and more maintainable. Thanks!


Top