Question

可能重复：
  Jquery html() and self closing tags
  Is it expected that jQuery $('span').html() turns XHTML br tag to html syntax?

我有这样的文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="/js/core/jquery.js" type="text/javascript"></script>
</head>
<body>
    <div id="content">
        <img src="/some/image.gif" />
    </div>
</body>
</html>

我想为某些节点检索html来执行某些操作。但我发现IMG存在一个问题。

$('#content').html();

这将返回无效的XHTML

<img src="/some/image.gif">

jQuery版本是1.4.2。

Answer 1

这是重复的，但原始问题中的答案都没有给出实际的解决方法。（可能是正确的。我不得不同意@Cletus在他的内容中所说的 - 一如既往的优秀 - 回答。）

但是如果你坚持使用XHTML：有一个jQuery plugin提供innerXHTML()函数（虽然维护得很差，最近更新了2007年，从未通过Beta发布）和一个名为{的JavaScript工具{3}}承诺做你需要的事。如果你需要这个，这可能是你最好的选择。

Answer 2

innerHTML / html()除非您在application/xhtml+xml媒体类型下实际将页面作为XHTML提供，否则不会为您提供XHTML序列化。（这不适用于IE＆lt; 9。）如果您以text/html为页面提供服务，那么当您将源解析为DOM时，您的自动关闭标签只会被浏览器忽略。您不能指望从您输入的序列化DOM中获取相同格式的HTML。

事实上，在某些情况下，IE innerHTML甚至不会为您提供有效的HTML序列化：它在某些情况下会忽略attr周围的引号。简而言之，您不能依赖innerHTML为您提供任何特定格式的标记。它可能会重新排序属性，它可能会HTML转义不同的字符，它可能会规范化属性值，它可能会改变空格。因此，对html()返回值执行字符串操作是非启动性的。您可以依赖的所有是您可以将序列化标记分配回另一个元素的innerHTML，浏览器将能够解析它。

您尝试检索XHTML的目的是什么？您可以使用正常的DOM样式操作来实现更多功能。

ETA评论：

然后XHTML有效性是您最不担心的。如果HTML格式不正确，您仍然可以将其写回html()。但是：

使用html()无法可靠地做的是告诉文本内容中的句子以及属性值中的内容。例如，<img title="Hello, this is some description. Another sentence.">是标记，如果您开始将<span> s 放在 title属性中，那么您显然会遇到困难。

这是一个文本处理任务，因此您应该在文本节点上执行此操作，而不是标记。这有点棘手，jQuery没有为您提供任何特殊工具。但请参阅this answer中的findText函数，您可以像以下一样使用它：

// Split each text node into things that look like sentences and wrap
// each in a span.
//
var element= $('#content')[0];
findText(element, /.*?[.?!]\s+?/g, function(node, match) {
    var wrap= document.createElement('span');
    node.splitText(match.index+match[0].length);
    wrap.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(span, node.nextSibling);
});

Answer 3

.html()不返回为创建节点而提供的HTML或XHTML标记，它返回浏览器的相关节点的内部表示。这个内部表示不符合XHTML，并且不是 - 它在技术上是一个内部实现细节。

您可以在浏览器中抛出任何HTML或XHTML，它会将其解析为内部DOM。如果原始源是糟糕的HTML，良好的HTML或完美的XHTML，那么内部DOM没有区别。生成的等效源文档的DOM将是相同的，但从中生成新的HTML文档不一定与源文档完全相同。

jQuery.html（）返回无效的IMG

3 个答案: