Why HIERARCHY_REQUEST_ERROR (3) when adding div to div on IE
I'm using jQuery 1.5.2 trying to dynamically load a div from one source into a div in my container document. When I load the document on Firefox 4, the document loads with the message "Got it!", but when I load it on IE9, I get an HIERARCHY_REQUEST_ERROR when it attempts to .append() the one div to another.
Here is the container:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/harness-script.js"></script>
</head>
<body>
<div id="main_cont">
</div>
</body>
</html>
Here is the harness-script:
function load_stuff(widget_source) {
var node = $(widget_source.documentElement).clone();
// add the node to the main content
$('#main_cont').append(node);
}
// Load and init the widget
$(document).ready(function() {
resp = $.get(
'/static/widget.xhtml',
load_stuff
);
});
The widget.xhtml is very simple:
<?xml version="1.0" encoding="UTF-8"?>
开发者_运维问答<div>
Got it!
</div>
How can I re-write this such that it works cross-browser?
The official answer from the jQuery team is that loading XHTML into a DOM is not possible under IE.
The only solution I have found is to do server-side browser detection and transmit the content as "text/html" instead of "application/xhtml+xml" when the browser is IE.
I imagine it's also possible to write a client-side handler that would append the node of not on IE, and explicitly construct a DOM from the XML if on IE, but that's not worth the trouble to me, since I have access to the server side.
加载中,请稍侯......
精彩评论