jQuery DOM操作之插入节点
插入节点
将新创建的节点插入到某个文档的方法并非只有常见的append()，
在jQuery中还提供了其他几种插入节点的方法，
如表
一、append( ) 、appendTo( ) -- 在元素内部的后面追加
| append() | 向匹配的元素内部的后面追加内容 | $(A).append(B) 将B追加到匹配的A中 |
| appendTo() | 将元素追加到指定的元素中的后面 与append()正好颠倒 即不是将B追加到A中 而是将A追加到B中 |
$(A).appendTo(B) 将A追加到B中 |
假设标签中有如下代码：
我想说：Hello...
如果希望在 标签内的文字变成 “我想说：Hello...Hi!”。并且 “Hi!” 两个字母加粗。
则代码应该写成
我想说：Hello...Hi!
如果用 append() 和 appenTo() 实现
1. append()方法：
无标题文档
我想说：Hello...
注意此例子中标签应该写在 中要操作的标签的下面。
最好直接写在 内部的最下面。
因为该js代码实现的前提是需要在标签加载完毕的时候。
如果写在标签内。页面运行时还没有加载出中的
标签。所以js代码块不起作用。
参考： http://blog.csdn.net/asheandwine/article/details/78148842
此时就等于了
我想说：Hello...Hi!
2. appendTo()方法：
如果直接将上边 代码内的
“ $("p").append("Hi!"); ” 改成 “ $("p").appendTo("Hi!"); ”
则运行页面时发现页面空白。因为 appendTo()方法是将前边的内容追加到后面的内容中。
而HTML文档中并没有"Hi!"这行内容。所以无从追加。
如果将“ $("p").appendTo("Hi!"); ”中 appendTo 前后括号调换位置。再运行页面，运行结果同上。
也就是说 如果希望 页面中HTML结构由
我想说：Hello...
变为
我想说：Hello...Hi!
那么以下两种方式都是正确的，但区别是前后内容括号颠倒位置
$("p").appendTo("Hi!"); //1.在标签里追加"Hi!"
$("Hi!").appendTo("p"); //2.将"Hi!"追加到
标签
二、prepend( ) 、 prependTo( )--在元素内部的前面追加
| prepend() | 向匹配的元素内部前置内容 | $(A).prepend(B) 将B前置到匹配的A中 |
| prependTo() | 将元素前置到指定的元素中 与prepend()正好颠倒 即不是将B前置到A中 而是将A前置到B中 |
$(A).prependTo(B) 将A前置到B中 |
若在代码块中用 prepend()
$("p").prepend("Hi!");运行后：
可以看出prepend()方法将 "Hello" 追加到
标签内部的前边。也就是说位于
标签内部的最前方因此pretend()方法和attend()方法虽然都是在元素内部追加指定内容，但是前者在内部的前面追加。后者在内部的后面追加。
若上述在代码块中用 prependTo(),同上面appendTo一样。页面空白。
而调换前后括号换位置时候运行同上。
也就是说 如果希望 页面中HTML结构由，
我想说：Hello...
那么以下两种方式都是正确的，但区别是前后内容括号颠倒位置
$("p").prepend("Hi!");//1.在标签内部的前边追加"Hello"
$("Hi!").prependTo("p");//2.将"Hello"追加到
标签内部的前边
三、before( ) 、insertBefore( ) --在元素外部之前加入内容
| before() | 在匹配的元素之前插入内容 | $(A).before(B) 将B插入到匹配的A前面 |
| insertBefore() | 将元素插入到指定的元素的前面 与before()正好颠倒 即不是将B插入到A前面 而是将A插入到B前面 |
$(A).insertBefore(B) 将A插入到B前面 |
同样假设标签内部有 “ 我想说：Hello...
js中写入以下代码：
$("p").before("Hi!");运行结果：
或者说换成insertBefore()方法运行以下代码：
$("Hi!").insertBefore("p");我想说：Hello... 我想说：Hello...
四、after( ) 、insertAfter( ) --在元素外部之后加入内容
| after() | 向匹配的元素之后插入内容 | $(A).append(B) 将B插入到匹配的A后面 |
| insertAfter() | 将元素插入到指定的元素后面 与after()正好颠倒 即不是将B插入到A后面 而是将A插入到B后面 |
$(A).appendTo(B) 将A插入到B后面 |
同样假设标签内部有“ 我想说：Hello...
js中写入以下代码：
$("p").after("Hi!");
同样换成insertAfter()方法运行以下代码：
$("Hi!").insertAfter("p");总结的说，如果希望实现将HTML结构由
我想说：Hello... 我想说：Hello...
after()和insertAfter()两种方法都可以。但是要注意前后括号的位置关系。
所以before() 和insertBefore()、after和insertAfter()方法是往指定元素的外部插入新的节点。
不同的是 before()和insertBefore()是在元素之前添加新内容。即元素的外部的前边。
而after和insertAfter()方法是在元素之后添加新内容。即元素的外部的后边。
attend() 和attendTo()、prepend和prependTo()方法是往指定元素的内部插入新的节点。
不同的是prepend和prependTo()方法是在元素中的前边添加新内容。即元素的内部的前边。
而attend() 和attendTo()是在元素中的后边添加新内容。即元素的内部的后边。