将 XML 插入 DOM 导致类/id 选择器不工作答案

【问题标题】：insert XML into DOM leads to not working class/id selectors将 XML 插入 DOM 导致类/id 选择器不工作
【发布时间】：2012-02-29 21:55:43
【问题描述】：

我正在尝试使用 ajax 加载 XML 文件，并将此 XML DOM 文档的部分内容插入浏览器 HTML DOM。

到目前为止，这是可行的，但是当我尝试使用 jquery 获取具有类或 id 选择器的插入元素时，它会返回空列表。

到目前为止，我只在 Firefox 10 中尝试过。有谁知道为什么会这样？这样做不安全吗？

test.html:

<html><head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <title>dom test</title>
  <script type="text/javascript">
    $(function() {
      var xml = null;
      $.ajax({
        type : "GET",
        async : false,
        url : 'test.xml',
        dataType : "xml",
        success : function(data) {
          xml = data;
        }
      });

      $('body').html($(xml).children().clone());

      console.log($('h1')); // prints the h1 element
      console.log($('.title')); // prints empty list

      console.log($('p')); // prints the p element
      console.log($('#content')); // prints empty list
    });      
  </script>
</head><body></body></html>

test.xml：

<div id="root">
  <h1 class="title">Blabla</h1>
  <p id="content">
    Lorem ipsum
  </p>
</div>

【问题讨论】：

运行后页面的正文是什么样的？
试试把dataType改成'html'...还有，你为什么用.clone()？
@daniel，来源看起来像预期的那样，正确插入了 xml 中的代码。
@chris, datatype to html 是不够的，那么文档必须是真正的html。测试用例不需要 clone()，它不会改变行为。

标签： javascript jquery xml dom

【解决方案1】：

您似乎只是想通过 AJAX 获取 HTML，然后将其插入您的页面。为此，您应该在 ajax 请求中使用 dataType: "html"。

$(function() {
    var html = null;
    $.ajax({
        type : "GET",
        async : false,
        url : 'test.xml',
        dataType : "html",
        success : function(data) {
            html = data;
        }
    });

    $('body').html(html);

});

【讨论】：

这只是一个简单的测试用例，真正的XML只有一些需要插入的部分，看起来像HTML。将数据类型设置为“html”也是不够的。我必须添加一个带有正确 xmlns 声明的 html 根元素。

【解决方案2】：

它正在按预期进行。可以通过提醒$(xnl).find("h1").text() 进行验证。但是，您能否尝试将 xml 中的双引号更改为单引号。并在您的 ff 中禁用 HTML5 支持（这也可能是问题所在）？

【讨论】：