JQuery之五：操作元素内容

前面已经介绍了如何操作元素的properties&attributes 以及 CSS styles，这节来看看如何操作元素的内容。

获取或替换html及text内容

1. 使用html()方法

1) 不带参数的html()

获取wrapped set中的第一个元素的html内容，等同于调用这个元素的innerHTML属性。

2) 带参数的html(value) 

使用value指定的html设置wrapped set中所有元素的html内容。返回wrapped set以便jQuery链式操作。

2. 使用text()方法

1) 不带参数的text()

获取wrapped set中第一个元素的text内容。

2) text(value)

用value指定的text设置wrapped set中所有元素的text内容。如果text中包含<>这样的字符，会被自动转换为HTML entities（  & #60; 和 & #62;）。

返回wrapped set以便进行jQuery链式操作。

移动或者拷贝元素内容

1. 使用target.append(content)方法

前面的这个target是为了表明target是是添加动作的目标（以便跟后面的appendto(target)方法区别）， target是一个wrapped set。

content可以是(String|Element|Object) 中的任何一个，也就是：

--包含html标签的string

--DOM elment

--Object可以是一个$()筛选的wrapped set

特别需要注意：content是被移动或者拷贝取决于target，如果target只有一个element则是移动，如果target是一堆elements则是拷贝。如果想在target是一个element时拷贝的话就不能这么玩了，应该如下：

$('p:first').append($('image.moveme').clone());

2. 使用content.appendTo(target)方法

将wrapped set移动（target是单个元素）或拷贝（target是多个元素）到target所指示的wrapped set中（最后一个子元素之后）。

target可以是一个表示jQuery selector的字符串或者一个DOM element。

3. 其他类似方法

1) target.prepend(content) 或 content.perpendTo(target)

将content表示的元素（或集合）移动或拷贝到target的第一个子元素之前。

2) target.before(content) 或 content.insertBefore(target)

将content表示的元素（或集合）移动或拷贝到target之前（而不是作为子元素）

3) target.after(content) 或 content.insertAfter(target)

将content表示的元素（或集合）移动或拷贝到target之后。

这些方法都遵循上述target单复数的移动或拷贝原则。

包裹元素

1. 使用wrap(wrapper)

使用wrapper包裹每一个wrapped set中的元素并返回原来的wrapped set。

wrapper可以是一个html字符串或者是一个元素的copy，可不是将wrapped set移动到wrapper里面哦，那是appendTo的功效。

2. 使用wrapAll(wrapper)

将wrapped set作为一个整体用wrapper包裹，并返回原来的wrapped set。

移出元素

1. 使用remove()方法

从DOM中移除wrapped set。返回原来的wrapped set。

使用这个方法可以弥补appendTo()，prependTo()，insertBefore()，insertAfter()方法对于多个元素组成的target只能copy的影响，可以结合起来进行move动作，比如：

$('.divToMove').appendTo($('.divContainer')).remove(); //页面有多个class名称为divContainer的元素

2. 使用empty()方法

移除wrapped set中每个元素的内容（而不是元素本身）。返回empty后的wrapped set（试验证明的，跟remove的确不同）。

克隆元素

使用clone(copyHandlers) 方法

生成wrapped set的一个拷贝，并返回这个拷贝。wrapped set中元素的子元素也会被拷贝，如果包含有事件处理绑定，则由copyHandlers(true|false)判断是否一起拷贝。

前面已经给出用clone()方法弥补target只包含一个元素只能move的问题。

 

这些东西，比较枯燥，得多试验才能得到真正的结果。