如何将 XML 内容附加到 HTML 元素，就好像它是 HTML 一样并应用 CSS 样式？答案

【问题标题】：How to append XML content to an HTML element as if it were HTML and apply CSS styles?如何将 XML 内容附加到 HTML 元素，就好像它是 HTML 一样并应用 CSS 样式？
【发布时间】：2013-05-19 11:02:01
【问题描述】：

我有一个名为“layouts.xml”的 XML 文件，如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<layouts>
   <layout id="layoutA">
     <div class="layout typeA">
       <div class="class1"></div>
       <div class="class2"></div>
     </div>
   </layout>
   <layout id="layoutB">
     <div class="layout typeB">
       <div class="class1"></div>
       <div class="class3"></div>
     </div>
   </layout>
</layouts>

XML 中的每个“布局”元素都包含一组 div 元素，我想将它们作为 HTML 动态插入到我的网页中。我正在尝试这样做：

$.fn.myFunc = function () {
   var url = "layouts.xml";
   var $element = $(this);  // element to append to

   $.get(url, function (responseXml) {
      var $layout = $(responseXml).find('#layoutA').children();
          $element.empty();
          $element.append($layout);
   });
}

$('div#myDiv').myFunc();

这会将标记插入到我的网页中，但我为这些动态插入的 div 元素创建的 CSS 样式并未应用。样式应用于已经存在的 HTML 元素，但不应用于任何动态添加的内容。我已经使用在线 w3c 服务验证了 CSS、XML 和生成的 HTML。

非常感谢您在应用这些 CSS 样式方面的帮助！谢谢。

【问题讨论】：

它应该工作检查这个jsfiddle.net/jzbPz你能展示你的css吗？
我已经确认当我将 XML 附加为文本时它可以工作，但我只能通过 XMLSerializer 类获取文本。 'responseXml' 对象是一个#document，我获取 $layout 的方式使我无法使用 $.text() 和/或 $.html() 访问底层 XML。

标签： javascript jquery html css xml

【解决方案1】：

在切换到 $.ajax() 方法并指定“文本”的数据类型后，我能够附加 XML，如下所示：

var $element = $('div#myDiv');

$.ajax({
    url: 'layouts.xml',
    dataType: 'text',
    success: function (data) {
        var $layout = $(data).find('.layout typeA');
        $element.empty();
        $element.append($layout.html());
    }
});

正如 Tap 指出的，我需要将 XML 附加为文本。但是，我无法通过 $.text() 或 $.html() 方法将 XML 作为文本从 XML 文档对象中获取，因此我必须更改 AJAX 请求，以便它将 XML 作为文本提供给我（而不是作为 XML 文档对象）。

【讨论】：

【解决方案2】：

不要将 xml 元素附加到您的 html DOM 中，而是附加它的文本值。

$element.append($layout.html());

或者对于多个孩子，

$layout.each(function(){
    $element.append($(this).html());
});

【讨论】：

$layout.text() 返回一长串除了空格和 CR+LF 什么都没有...知道为什么吗？
我在使用 XMLSerializer 时已经让它工作了，但我担心这不是最好的解决方案，因为它是特定于浏览器的。
'var $element = $(this)' 中的 'this' 的上下文是什么？它对我有用 - 在 class1 和 class2 上有样式。
封闭函数被声明为 $.fn.myFunc()，因此“this”在该方法的范围内。调用如下所示： $('div#myDiv').myFunc() -> 其中 #myDiv 是将 HTML 附加到的 div。