在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、例子:
重要: 如果有多个目标元素,内容将被复制然后插入到每个目标里面。(以上五大点共有的内容)
以上五大点需要注意,一个共同点:如果一个被选中的元素被插入到另外一个地方,这是移动而不是复制。
举其中五个中的其中一个:
移动之前:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
移动方法:
$('.container').prepend($('h2'));
结果:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>