jquery.html() 从字符串加载时只返回第一个文本答案

【问题标题】：jquery.html() returns only first text when loaded from stringjquery.html() 从字符串加载时只返回第一个文本
【发布时间】：2015-05-03 17:56:21
【问题描述】：

假设一个 jquery 对象可以从字符串初始化。处理 ajax 结果时经常会发生这种情况，即我正在尝试复制 http://api.jquery.com/jQuery.post/

但是，我看到了奇怪的行为：

function test() {
    var content = $("<html><body><div>hello</div><div>world</div></body></html>");
    alert("content.text() = " + content.text());
    alert("content.html() = " + content.html());
}

第一个警报显示：content.text() = helloworld

第二个警报显示：content.html() = hello

这里发生了什么？

解决方案

感谢大家的解释。我最终添加了另一层<div> 以拥有<body> 的单个子级，如

<html>
 <body>
  <div>    <=== added
   <div>hello</div>
   <div>world</div>
  </div>
 </body>
</html>

【问题讨论】：

标签： javascript jquery html dom

【解决方案1】：

当解析包含body 元素的HTML 片段时，一般的浏览器（jQuery 也这样做）会忽略除body 元素内的所有内容。所以你所拥有的最终等同于：

var content = $("<div>hello</div><div>world</div>");
alert("content.text() = " + content.text());
alert("content.html() = " + content.html());

您最终会得到一个包含两个元素的 jQuery 对象：div 元素。

在 jQuery 中，通常的访问函数（html、val、css 等）在将它们用作 getter 时仅使用集合中的 first 元素，这就是html 在上面做。 text 是 jQuery 中的一个 unusual 访问器函数：它为您提供集合中所有元素的组合文本，而不仅仅是第一个。

我们可以在文档中看到这一点，但这仍然令人惊讶。来自html：

获取匹配元素集合中第一个元素的HTML内容或设置每个匹配元素的HTML内容。

来自text：

获取匹配元素集合中的组合文本内容每个元素，包括它们的后代，或者设置匹配元素的文本内容。

（我在这两种情况下都强调。）

【讨论】：

谢谢 T.J.在某些时候，我已经阅读了文档的所有单独部分，但没有将 1 +1 放在一起。
@RudigerW.：我对text 的这种行为感到非常惊讶，直到我看到你的问题并说“等等，这看起来不对”时才知道。 :-) 所以这是我未来的一个错误，你的问题有助于防止。

【解决方案2】：

浏览器会删除那些 html 和 body 元素。 content 集合只有 2 个 div 元素。

在传递复杂的 HTML 时，某些浏览器可能无法生成完全复制所提供的 HTML 源的 DOM。如前所述，jQuery 使用浏览器的 .innerHTML 属性来解析传递的 HTML 并将其插入到当前文档中。在此过程中，某些浏览器会过滤掉某些元素，例如<html>、<title> 或<head> 元素。因此，插入的元素可能不代表传递的原始字符串。

这是您的content 集合的字符串表示形式：

content.map(function() { return this.outerHTML || this.nodeValue; }).get().join('');
// -> <div>hello</div><div>world</div>

.text() 方法返回集合中所有元素的textContent/nodeValue：

content.text(); // -> helloworld

.and .html() 方法返回集合中第一个元素的innerHTML：

content.html(); // -> hello

【讨论】：

谢谢，@Vohuman。在某些时候，我已经阅读了文档的所有单独部分，但没有将 1 +1 放在一起。我会接受你的回答，因为它是第一个并且有很酷的 content.map 解决方案，但是 T.J.克劳德的解释更彻底。

【解决方案3】：

这是您的content 在浏览器中的样子：

"content = " Object { 0: <div>, 1: <div>, length: 2 }

基本上这是由 2 个元素组成的集合。

http://api.jquery.com/html/ 是这样说的：

获取匹配元素集中第一个元素的 HTML 内容

【讨论】：