使用.html()和.contents()之间的区别

时间:2012-02-10 17:01:00

标签: jquery html

使用这两个jQuery片段有什么区别?

.append( $(this).contents() );
// and
.append( $(this).html() );

2 个答案:

答案 0 :(得分:26)

是的,他们完全不同

  • .contents()为您提供一个jQuery对象,其中包含元素的所有 子DOM节点

  • .html()为您提供 从该元素的后代节点呈现的HTML 字符串。

因此当您.append() contents()时,您将节点重新定位到新位置。

当您.append() .html()时,您正在从HTML字符串生成新节点。


请注意,在客户端, 没有HTML 。你只有DOM。

考虑到......

  • ...执行.html()时,正在发生的事情是正在分析所有后代DOM节点,并且正在创建HTML字符串 并返回。

  • ...执行.html('<b>some HTML content</b>')时,HTML字符串本身不会添加到DOM中,而是字符串已解析,并生成新的DOM节点,然后将其添加到DOM。


基于关于剪切和复制的评论,听起来好像您仍然认为您正在使用从服务器发送的原始HTML字符串。

你不是。

您正在使用彼此嵌套的JavaScript对象(以及主机对象),以形成对象(父母,子女,孙子女等)的层次结构。您可以将该层次结构的一部分重定位到层次结构中的另一个位置。

此元素层次结构称为DOM或文档对象模型。

不幸的是,由于jQuery的.append()接受了HTML字符串,因此它增加了一种错觉,即您实际上是在处理HTML标记而不是对象。

所以我再说一遍......

  • .html() 生成新的HTML字符串 。当您将字符串提供给.append()时,它将 根据该字符串创建新节点 ,并插入它们。

  • .contents()只需 选择现有节点 ,然后插入它们。由于节点不能同时位于两个位置,因此节点将重新定位到DOM中要追加它们的位置。

答案 1 :(得分:21)

.contents()返回元素,从而移动它们。 http://api.jquery.com/contents/

.html()返回一个字符串,从而复制元素。 http://api.jquery.com/html/