Hello,
If I try to assign some HTML content to <div>'s innerHTML property in javascript in IE 9, the HTML gets changed. More Details below:
1. 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"><head> <title>InnerHTML Assignment Issue - Demo</title> <style type="text/css"> .ParaMarked { ; border-right: 2px solid #5355bc; border-left: 2px solid #5355bc; cursor: pointer; } .ParaMarked:after { content: ""; ; left: 98%; bottom: 0; height: 2px; width: 2%; background: #5355bc; } .ParaMarked:before { height: 2px; background: #5355bc; width: 2%; display: block; content: ""; ; } table { cellspacing: "0"; cellpadding: "0"; border-collapse: collapse; margin-left: 0pt; } td { border-bottom-color: #000000; border-bottom-style: solid; border-bottom-width: 0.5pt; border-left-color: #000000; border-left-style: solid; border-left-width: 0.5pt; border-right-color: #000000; border-right-style: solid; border-right-width: 0.5pt; border-top-color: #000000; border-top-style: solid; border-top-width: 0.5pt; padding-left: 5.4pt; padding-right: 5.4pt; vertical-align: top; width: 239.4pt; } </style> <script type="text/javascript"> function OnMarkClick() { var range = document.selection.createRange(); var selectedTextHTML = range.htmlText; var markedText = "<span id='fs_1' class='ParaMarked' FactType='NonNumeric' onclick='OnSpanClick(\"fs_1\", event)' IsFactMarked='true'><fact id='1'>" + selectedTextHTML + "</fact></span>"; range.pasteHTML(markedText); } function OnCopyClick() { debugger; document.getElementById("divCopiedContent").innerHTML = document.getElementById("divContent").innerHTML; } </script></head><body> <div id="divContent"> <p style="font-size: 11pt; line-height: 115%; margin: 0pt 0pt 10pt"> <span style="font-family: Calibri; font-size: 11pt">THIS IS TEST CONTENT. PARAGRAPH 1</span></p> <table> <tr> <td> <p style="margin: 0pt"> <span style="font-family: Calibri; font-size: 11pt">92384923</span></p> </td> <td> <p style="margin: 0pt"> <span style="font-family: Calibri; font-size: 11pt">3948</span></p> </td> </tr> <tr> <td> <p style="margin: 0pt"> <span style="font-family: Calibri; font-size: 11pt">038403</span></p> </td> <td> <p style="margin: 0pt"> <span style="font-family: Calibri; font-size: 11pt">3059304</span></p> </td> </tr> </table> <p style="font-size: 11pt; line-height: 115%; margin: 0pt 0pt 10pt"> <span style="font-family: Calibri; font-size: 11pt"> </span></p> <p style="font-size: 11pt; line-height: 115%; margin: 0pt 0pt 10pt"> <span style="font-family: Calibri; font-size: 11pt">TH</span><span style="font-family: Calibri; font-size: 11pt">IS IS TEST CONTENT. PARAGRAPH 2</span></p> </div> <input type="button" id="btnMark" value="Mark" onclick="OnMarkClick();" /> <input type="button" id="btnCopy" value="Copy Contents" onclick="OnCopyClick();" /> <div id="divCopiedContent"> </div></body></html>If you attach a debugger; in OnCopyClick() function above, and check "document.getElementById("divContent").innerHTML" and "document.getElementById("divCopiedContent").innerHTML" values after execution of below statement:
document.getElementById("divCopiedContent").innerHTML = document.getElementById("divContent").innerHTML;the HTML contents differ.
Any pointers on this would be appreciated.
Thanks.
