jQuery 设置元素内容

替换HTML或文本内容

语法：html()

功能：获取匹配集里第一个元素的HTML内容。

返回：第一个已匹配元素的HTML内容。

 

语法：html(text)

功能：把传入的HTML片段设置为所有匹配元素的内容。

参数 text：（字符串）将被设置为元素内容的HTML片段。

返回：包装集。

 

语法：text()

功能：把包装集里元素的所有文本内容连接起来，并返回字符串作为命令的结果。

返回：连接而民的字符串。

 

语法：text(content)

功能：把所有已包装元素的文本内容设置为已传递值。如果已传递文本包含“<”或“>”，则这些字符被替换为等价的HTML实体。

参数 content：（字符串）将要设置到已包装元素里的文本内容。

返回：包装集。

注意：用这些命令来设置元素的内部HTML或文本，将替换元素里的原先内容。

移动和复制元素

语法：append(content)

功能：把传入的HTML片段或元素追加到所有已匹配内容之后。

参数 content：（字符串、元素、对象）将被追加到包装集各元素的一个字符串、元素或包装集对象。

返回：包装集。

例1：从传入的字符串创建HTML片段，追加到所有<p>元素的现有内容的末尾。

$('p').append('<b>some text</b>');

例2：标识DOM现有元素作为追加项。

$('p#appendToMe').append($('a.appendMe'));

 注意：对原始元素的布置取决于作为追加目标的元素的数量。如果是单一的目标，则元素从原始位置删除（即，执行把原始元素移动到新父元素的操作）。如果有多个目标，则原始元素留在原处，而原始元素的副本被追加到各个目标元素（即，复制操作）。

如果不想追加整个包装集，也可以引用一个特定DOM元素，例如：

var toAppend = $('a.appendMe')[0];
$('p#appendToMe').append(toAppend);

 

语法：appendTo(target)

功能：把包装集里所有元素移动到指定目标的内容的末尾。

参数 target：（字符串、元素）一个包含jQuery选择器的字符串，或一个DOM元素。包装集各元素将追加到target所指定的那个位置。如果多个元素与一个选择器字符串匹配，则包装集各元素将被复制到与选择器匹配的每个元素。

返回：包装集。

工作方式类似的相关命令

• prepend(content) 和 prependTo(target)：在目标元素的内容之前插入源元素。
• before(content) 和 insertBefore(target)：在目标元素之前插入元素，而不是在目标元素的第一个子元素之前。
• after(content) 和 insertAfter(target)：在目标元素之后插入元素，而不是在目标元素的最后一个子元素之后。

包裹元素

语法：wrap(wrapper)

功能：把匹配集各元素用已传递HTML标签或已传递元素的克隆副本分别包裹起来。

参数 wrapper：（字符串、元素）用于包裹匹配集各元素的元素开始和结束标签；或者一个将被克隆且用作包裹器的元素。

返回：包装集。

例如：把带有surprise类链接包裹在div元素中。

$('a.surprise').wrap('<div></div>'); 

注意：若多个元素被收集于匹配集，则该方法分别操作其中的每个元素。

 

语法：wrapAll(wrapper)

功能：用已传递元素的克隆副本或已传递HTML标签，把匹配集的元素作为一个单元包裹起来。

参数 wrapper：（字符串、元素）用于包裹匹配集所有元素的元素开始和结束标签，或一个将被克隆且用作包裹器的元素。

返回：包装集。

 

语法：wrapInner(wrapper)

功能：用已传递元素的克隆副本或已传递HTML标签，把匹配集各元素的内容（包括文本节点）分别包裹起来。

参数 wrapper：（字符串、元素）用于包裹匹配集各元素的元素开始和结束标签；或者一个将被克隆且用作包裹器的元素。

返回：包裹集。

删除元素

语法：remove()

功能：从页面DOM里删除包装集里所有元素。

返回：包装集。

注意：从DOM里删除的元素仍然被该包装集引用着（因此不符合垃圾回收条件），并可用其他jQuery命令来进一步操作，包括appendTo()、prependTo()、insertBefore()、insertAfter()等。

 

语法：empty()

功能：清空匹配集里所有DOM元素的内容。

返回：包装集。

 

利用remove()和after()命令来实现替换操作，如下：

$.fn.replaceWith = function(html) {
    return this.after(html).remove();
}

$('div.elementToReplace').replaceWith('<p>替换成我。</p>'); 

克隆元素

语法：clone(copyHandlers)

功能：创建包装集里元素的副本，并返回包含这些副本的新包装集。元素以及任何后代元素都被复制。事件处理程序是否被复制，取决于参数copyHandlers的设置。

参数 copyHandlers：（boolean）若为true，复制事件处理程序；若为false或省略，则不复制。

返回：新创建的包装集。