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

Question

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

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

Answer 1

是的,他们完全不同

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

• .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中要附加它们的位置.

Answer 2

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

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