将 XML 插入 DOM 会导致类/id 选择器不起作用

发布于 2025-01-03 19:19:09 字数 1210 浏览 0 评论 0原文

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

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

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

测试.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>

测试.xml:

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

原文

I'm trying to load an XML file with ajax and insert parts of this XML DOM document into the browsers HTML DOM.

This works so far, but when I try to get an inserted element with a class or id selector with jquery it returns the empty list.

I tried it only in firefox 10 so far. does anyone have a clue why this might be? is it just not safe to do so?

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

人海汹涌 2025-01-10 19:19:09

看起来您只是想通过 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);

});

It seems like you are just trying to grab HTML via AJAX and then insert it into your page. To do that you should be using dataType: "html" in your ajax request.

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

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

});

回复收藏 0 原文