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