使用 Javascript 附加 <head> 元素适用于 .innerHTML，但不适用于 XML 子节点答案

【问题标题】：Attaching <head> elements with Javascript works with .innerHTML, but not XML child nodes使用 Javascript 附加 <head> 元素适用于 .innerHTML，但不适用于 XML 子节点
【发布时间】：2015-07-22 18:36:15
【问题描述】：

可能有更简单的方法可以做到这一点，但我正在尝试一些新方法。

基本要点是，我希望在我的静态网站上每页每个人都有一个 JS 和一个 jQuery 附件。我希望能够将元素附加到身体，但头部也是如此。我的文件是：

home.html

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="eco.js"></script>
</head>

eco.js

window.addEventListener("load", function() {
    var ajax = new XMLHttpRequest();
    ajax.onload = postdata;
    ajax.open("GET", ADDRESS, true);
    ajax.send();
} );

function postdata() {
    var xml = jQuery.parseXML(this.responseText);
    $("head").append(xml.querySelector("head").childNodes);
}

和common.xml

<head>
    <link href='eco.css' type='text/css' rel='stylesheet' /> 
    <link href='home.css' type='text/css' rel='stylesheet' /> 
</head>

但是，这不起作用（common.xml 被请求并成功检索）。 Chrome 开发工具显示 xml 节点也已成功附加到头部。然而该页面并未反映更改，特别是未合并 css。但是，如果我改变

    var xml = jQuery.parseXML(this.responseText);
    $("head").append(xml.querySelector("head").childNodes);

到

$("head").append(this.responseText);

（并修复 common.xml 以删除不需要的标签）然后页面反映更改。谁能解释这里发生了什么？

谢谢！

【问题讨论】：

标签： javascript jquery html xml dom

【解决方案1】：

jQuery.parseXML() 返回一个XMLDocument 对象，该对象代表一个与 HTML DOM 不兼容的通用 XML DOM。

在将 XML 文件解析为 XML 后追加子节点时，最终插入的是 XML 元素，而不是 HTML 元素。由于 HTML 处理器只能理解 HTML link 元素，因此当它们来自 XML DOM 时它无法识别它们——它们成为未知元素，并且没有它们预期的含义。

当您直接附加响应标记时，该标记将被解释为 HTML，因为您直接使用页面中的 HTML DOM。这允许您的 link 元素按预期工作，引用外部样式表以用于您的页面。

以下示例使用非 head 元素，演示了在您的问题中使用相同方法的 HTML 和 XML 之间的 b 元素有何不同。在 HTML 中，它代表text that is meant to stand out from a paragraph，并带有相关的默认样式。在纯 XML 中，它只是一个任意元素，没有默认样式。在 Firefox 和 IE 中，每个 b 元素也正确响应命名空间的 CSS 选择器（请注意，即使是 HTML 元素，它们也使用 XHTML 命名空间），尽管 IE 根本不插入 XML 元素，而是抛出 WrongDocumentError。包含的 CSS 在 Chrome 中也不能很好地工作——大概是因为与 IE 一样，尝试将 HTML 和 XML 结合在一起并不是最明智的做法。

$(function() {
  var html = '<b>HTML b element</b>';
  var xml = '<root><b>XML b element</b></root>';

  $('p.html').append(html);

  var xmlDoc = jQuery.parseXML(xml);
  $('p.xml').append(xmlDoc.querySelector(':root').childNodes);
});

@namespace 'http://www.w3.org/1999/xhtml';

b::before {
  content: 'Default namespace ';
}

|b::before {
  content: 'Non-namespaced ';
}

/* Any or no namespace */
*|b {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<p class="html"></p>
<p class="xml"></p>

有趣的是，如果您使用xml.querySelector("head").innerHTML 而不是xml.querySelector("head").childNodes，它似乎可以工作，尽管Element 对象不是HTMLElement（即xml.querySelector("head") instanceof HTMLElement 返回false）。根据this new answer by Louis，在最新版本的Firefox 和Chrome 中innerHTML 表示XML 元素节点内容的XML 序列化，这解释了这种行为。但是，不应该依赖 innerHTML 这个特殊的怪癖，因为它不是跨浏览器兼容的。

最终，您最好的选择是首先不将文档解析为 XML；只需通过直接附加responseText 将其视为常规 HTML 片段，因为 jQuery 能够处理 HTML 片段。

【讨论】：

感谢您提供如此深入研究和解释性的答案！