jQuery对内容的获取,添加,移动的.append(), .html(), .prepend(), .after(), .before()

落日映苍穹つ 2022-09-25 03:24 97阅读 0赞

在jQuery中我们使用.append(), .appendTo(), .html(), .text(), .prepend(), .prependTo(), .after(), .before(), .insertAfter(), .insertBefore() 是很方便的。

注意：是在引入jQuery库的前提下使用。

一、.append();.appendTo() 插入不替换

.append()函数将特定内容插入到每个匹配元素里面的最后面，作为它的最后一个子元素（last child），（如果要做为第一个子元素（first child）用.prepend）。

.appendTo()和.append()的功能相同。主要不同的是语法：插入内容和目标的位置不同。

解释：.append()选择表达式在函数的前面，参数是将要插入的内容。对于.appendTo()刚好相反，内容在方法前面，无论是一个选择器表达式或创建作为标记上的标记，它都  
将被插入到目标容器的结尾。

二、.html();.text()   插入替换（还可以获取）

设置元素的内容情况下：

1、.html()会把选择器下的已存在的元素全部替换为当前设置的元素(或文本)，元素中的任何内容会完全被新的内容取代（ 用新的内容替换这些元素前，jQuery从子元素删除其他结构，如数据和事件处理程序。防止内存溢出）。

2、text()会把选择器下的已存在的文本全部替换为当前设置的文本。

获取的情况下：

1、.html()获取集合中第一个匹配元素的HTML内容（ 如果选择器匹配多个元素）；

2、.text()得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的 文本内容；在XML 和 HTML 文档中都能使用。

3、.text()方法不能使用在 input 元素或scripts元素上。 `input` 或 `textarea` 需要使用.val()方法获取或设置文本值。得到scripts元素的值，使用. html()方法；

三、.prepend(), .prependTo()   插入不替换

1、如果一个被选中的元素被插入到另外一个地方，这是移动而不是复制。

`2、.prepend()`方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append() ).

`3、.prepend()`和.prependTo() 实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同。 对于 `.prepend()` 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数。而 `.prependTo()` 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。

四、.after(), .insertAfter()

1、在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

2. `.after()` 和.insertAfter() 实现同样的功能。主要的不同是语法——内容和目标的位置不同。 对于 `.after()`,要插入的内容来自方法的参数： `$(target).after(contentToBeInserted)` （即，选择器表达式在方法的前面，参数是将要插入的内容） 。 对于 `.insertAfter()`， 刚好相反，内容在方法前面并且插入到目标的前面， 而目标是传递给 `.insertAfter()`方法的参数： `$(contentToBeInserted).insertAfter(target)`。

五、.before(),.insertBefore()

1、 根据参数设定，在匹配元素的前面插入内容（外部插入）

2、 `.before()` 和.insertBefore() 实现同样的功能。主要的不同是语法——内容和目标的位置不同。 对于 `.before()`,要插入的内容来自方法的参数： `$(target).before(contentToBeInserted)` （愚人码头注：即，选择器表达式在方法的前面，参数是将要插入的内容） 。 对于 `.insertBefore()`， 刚好相反，内容在方法前面并且插入到目标的前面， 而目标是传递给 `.insertBefore()`方法的参数： `$(contentToBeInserted).insertBefore(target)`。

3、例子： **重要**: 如果有多个目标元素，内容将被复制然后插入到每个目标里面。（以上五大点共有的内容）

![SouthEast][]

以上五大点需要注意，一个共同点：如果一个被选中的元素被插入到另外一个地方，这是移动而不是复制。

举其中五个中的其中一个：

移动之前：

`<h2>Greetings</h2>`

`<div class="container">`

`     <div class="inner">Hello</div>`

`     <div class="inner">Goodbye</div>`

`</div>`

移动方法：

`$('.container').prepend($('h2'));`