使用这两个jQuery片段有什么区别?
.append( $(this).contents() );
// and
.append( $(this).html() );
答案 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/