innerHTML 可以与 XML 元素一起使用吗?

Posted

技术标签:

【中文标题】innerHTML 可以与 XML 元素一起使用吗?【英文标题】:does innerHTML work with XML Elements? 【发布时间】:2011-09-04 11:34:14 【问题描述】:

根据 javascript: The Definitive Guide:“尽管它的名字,innerhtml 可以与 XML 元素以及 HTML 元素一起使用”。

但是,当我实际尝试访问 XML Element 对象的 innerHTML 属性时,会返回 undefined

var xml = $.ajax(url: "test.xml", async: false).responseXML.documentElement;
console.log(xml.innerHTML); // displays "undefined" in console log

,这是什么行为,如何解释呢? P>

test.xml:

<?xml version="1.0" encoding="utf-8"?>
<foo><bar>baz</bar></foo>

【问题讨论】:

什么是您的响应XML的样子? SPAN> 编辑的问题包含XML响应。跨度> 【参考方案1】:

较早的答案并未针对截至 2014 年 9 月存在的较新浏览器。当使用以下方式创建 XML 文档时:

var parser = new DOMParser(); 
var doc = parser.parseFromString(data, "text/xml");

其中data 是作为字符串的XML 文档,则以下情况为真:

在 Firefox 28 和 Chrome 36 中,doc 中的节点有一个 innerHTML 字段,其中包含节点内容的 XML 序列化。

在 IE 9、10 和 11、Safari 7.0 和 Opera 12 中,doc 中的节点既没有 innerHTML 字段也没有 xml 字段。我无法确定可以代表这些领域的东西。除了对这些浏览器使用 XMLSerializer 之外,似乎没有其他选择。

【讨论】:

这太奇怪了。我期望一个名为innerHTML 的属性可以处理除HTMLElement 对象之外的任何东西。我想知道这是否是最新标准的预期行为?仅供参考,我回到这个问题并在回答 this question 时发现了你的答案。【参考方案2】:

解释是书在这一点上是错误的。

IE 中的 XML 元素有一个非标准的xml 属性,它提供了innerHTML 的等价物。对于其他浏览器,您需要使用XMLSerializer

【讨论】:

我希望不是这样(我有最新版本!)。感谢您的回复。 你会认为一本这么大的书会有一些错误,但这并不完全是一个错字,而且它是第六版,所以我有点惊讶。 @BoltClock:书籍经常出错,即使是通常优秀的 JavaScript: The Definitive Guide。我不认为我拥有一本没有任何错误的 JS 书。 我知道。那只是为了让事情变得轻松:)【参考方案3】:

HTML5 在 XML 元素上定义了 innerHTML(尽管名称不同,但使用 XML 解析器/序列化器)。还没有实现这一点。 Opera 有一段时间在 XHTML 中支持 innerHTML(虽然一般不支持 XML),但它使用 HTML 解析器/序列化器。

【讨论】:

为什么 HTML5 对 XML 有话要说? 来自规范DOM Parsing and Serialization。看起来一些 HTML 泄露到了 XML 世界中。【参考方案4】:

您可以这样做,但我更喜欢使用 jQuery,因为它更容易实现。 jQuery 方式是选择您想要的元素容器。然后,您可以使用 html() 属性来更改或获取元素的 innerHTML。

$("myxmltag").html("<achildtag>Hello</achildtag><anotherchildtag>World!</anotherchildtag>");

有关此属性的更多信息,请参阅:http://api.jquery.com/html/

另外,不要忘记 html() 和 text() 之间的区别,您可以使用 jQuery 使用其他属性来操作 xml 中节点内的元素,例如 append()、prepend()、after( ) 等...

【讨论】:

jQuery 的 html() 文档明确指出该方法不适用于 XML 文档。 我不知道为什么,但它对我有用。好吧,我认为这是因为我手动创建了 xml,我的意思是,我没有从服务器获取它。

以上是关于innerHTML 可以与 XML 元素一起使用吗?的主要内容,如果未能解决你的问题,请参考以下文章

JQuery中的文本与innerHTML

JavaScript中,可以用元素的innerHTML直接添加子元素吗?

使用 InnerHTML 加载 html 页面时保持 CSS 样式

javascript的outerHTML属性的作用

附加元素与 innerHTML

DOMParser 与模板和 innerHTML 的优势