将 XML 插入 DOM 导致类/id 选择器不工作
Posted
技术标签:
【中文标题】将 XML 插入 DOM 导致类/id 选择器不工作【英文标题】：insert XML into DOM leads to not working class/id selectors 【发布时间】：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()，它不会改变行为。
【参考方案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 支持（这也可能是问题所在）？
【讨论】：
以上是关于将 XML 插入 DOM 导致类/id 选择器不工作的主要内容，如果未能解决你的问题，请参考以下文章