插入从带有 jQuery 的 XML 文件加载的 HTML DOM 元素答案

【问题标题】：Inserting HTML DOM elements loaded from an XML file w/ jQuery插入从带有 jQuery 的 XML 文件加载的 HTML DOM 元素
【发布时间】：2011-02-19 18:04:46
【问题描述】：

如果有更简单/更好的方法来做到这一点，请说出来（我刚刚开始学习 JS，第一语言），但这是我想要完成的目标：

我有一个包含一组谷歌地图标记的 XML 文件，即：

<?xml version="1.0" encoding="UTF-8"?>
<markers>
  <marker name="Our Venue" lat="32.735873" lng="-117.255323" icon="wedding">
    &lt;div id="info"&gt; &lt;h2&gt;Title&lt;/h2&gt; &lt;a href="http://site.com/link.html"&gt;Official web site&lt;/a&gt; &lt;p&gt;Blah blah blah!&lt;/p&gt; &lt;/div&gt;
  </marker>
...

我可以让 jQuery 加载所有信息并将其解析为 google.maps.Marker(s)：

    jQuery.get("map_data.xml", {}, function(data) {
        jQuery(data).find("marker").each(function() {
            var marker = jQuery(this);
            var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng")));
            var title = marker.attr("name");
            var icon = marker.attr("icon");
            var markerContent = marker.contents();
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: crIconRegistry[icon],
                title: title
            });

现在，当我单击地图标记时，我希望它可以将 XML 文件中的 HTML 内容插入到页面上的 DIV 中，如下所示：

jQuery.jcps.insertFromMap = function (speed, target, markerContent) {
    if (speed == 0) {
    $(target).html(markerContent);
}
else {  
    $(target).fadeToggle(speed, function(){$(this).html(markerContent);}).fadeToggle(speed);
    }
}

google.maps.event.addListener(marker, "click", function() {
    jQuery.jcps.insertFromMap(crFaderSpeed, crDefaultPanel, markerContent);
});

但是，当我尝试此操作时（在 safari 中，尚未测试其他人），我收到以下错误：“WRONG_DOCUMENT_ERR: DOM Exception 4: A Node was used in a different document than the one”

TIA 寻求帮助！

【问题讨论】：

标签： javascript jquery xml dom google-maps

【解决方案1】：

可能是您多次使用 markerContent 吗？它可能会导致奇妙的事情：example。一种解决方法是使用 .clone: example

【讨论】：

不，我只使用了一次，和我的示例代码一样。不过还是谢谢。

【解决方案2】：

详情请看Cross-Browser Scripting with importNode()的精彩讲解

在target 中添加markerContent 之前，您必须检查是否支持importNode。

如果您使用的是 jQuery 1.5，请查看 parseXML()，它似乎已经解决了这个问题（尽管我自己没有测试过）。

【讨论】：

啊，那篇文章听起来和我一样的问题。 parseXML 的文档不是很清楚，我必须在早上尝试一下，看看我得到了什么:)
parseXML() 似乎没有解决问题，尽管我想我可能做错了。我还尝试将 jQuery 对象转换为一个简单的字符串并插入它，但我得到了同样的错误。很困惑。
您是否尝试更改此行：var markerContent = marker.contents();到 var markerContent = marker.html(); ?

【解决方案3】：

已解决，尽管我不确定为什么会有所作为。我之前的代码两次使用了变量名“marker”：首先保存 XML jQuery 对象，然后重新定义保存 google.maps.Marker 对象。一定有一个我不知道的冲突，因为更改变量名解决了这个问题。修改后的代码：

jQuery.get("map_data.xml", {}, function(data) {
        jQuery(data).find("marker").each(function() {
            var node = jQuery(this);
            var latlng = new google.maps.LatLng(parseFloat(node.attr("lat")), parseFloat(node.attr("lng")));
            var title = node.attr("name");
            var icon = node.attr("icon");
            var markerContent = node.contents().text();
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: crIconRegistry[icon],
                title: title
            });
            google.maps.event.addListener(marker, "click", function() {
                jQuery.jcps.insertFromMap(crFaderSpeed, crDefaultPanel, markerContent);
            });
        });
    });

感谢您的帮助！

【讨论】：

【解决方案4】：

您的原始代码失败，因为您试图将 dom 节点从一个文档合并到另一个文档中 - safari 对此表示反对（firefox 7、chrome 15 不这样做，尽管它们可能应该这样做）。正如 ritesh 指出的那样，您可以调用 dom 函数importNode。

但是，要避免要导入的 dom 节点的深层副本，请使用 adoptNode。

所有主流浏览器都支持，包括 ie 9（个人在 safari 5、chrome 15、firefox 7 上测试）。

希望这是有用的附加信息，

最好的问候，卡斯滕

【讨论】：