jQuery DOM操作之插入节点

最新推荐文章于 2024-01-11 07:06:10 发布

Ashe And Wine

最新推荐文章于 2024-01-11 07:06:10 发布

阅读量578

点赞数

分类专栏： web前端文章标签： jquery 插入节点 append before after

本文链接：https://blog.csdn.net/asheandwine/article/details/78149298

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

插入节点
将新创建的节点插入到某个文档的方法并非只有常见的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>

如果希望在标签内的文字变成 “我想说：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>中的标签。所以js代码块不起作用。

参考： http://blog.csdn.net/asheandwine/article/details/78148842

此时就等于了

<p>我想说：<i>Hello...</i><b>Hi!</b></p>

运行图：

2. appendTo()方法：

如果直接将上边 <script></script>代码内的

“ $("p").append("Hi!"); ” 改成 “ $("p").appendTo("Hi!"); ”

则运行页面时发现页面空白。因为 appendTo()方法是将前边的内容追加到后面的内容中。

而HTML文档中并没有"Hi!"这行内容。所以无从追加。

如果将“ $("p").appendTo("Hi!"); ”中 appendTo 前后括号调换位置。再运行页面，运行结果同上。

也就是说如果希望页面<body>中HTML结构由

我想说：Hello...

变为

我想说：Hello...Hi!

那么以下两种方式都是正确的，但区别是前后内容括号颠倒位置

$("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()方法将 "Hello" 追加到标签内部的前边。也就是说位于标签内部的最前方
因此pretend()方法和attend()方法虽然都是在元素内部追加指定内容，但是前者在内部的前面追加。后者在内部的后面追加。

若上述在<script></script>代码块中用 prependTo(),同上面appendTo一样。页面空白。

而调换前后括号换位置时候运行同上。

也就是说如果希望页面<body>中HTML结构由，

我想说：Hello... 变为 Hi!我想说：Hello...

那么以下两种方式都是正确的，但区别是前后内容括号颠倒位置

$("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>标签内部有 “ 我想说：Hello... ”代码行
js中写入以下代码：

$("p").before("<b>Hi!</b>");

运行结果：

或者说换成insertBefore()方法运行以下代码：

$("<b>Hi!</b>").insertBefore("p");

运行结果同上。总结的说。以上两种方法都能实现将HTML结构由

我想说：Hello... 变为 Hi!我想说：Hello...

四、after( ) 、insertAfter( ) --在元素外部之后加入内容

after()	向匹配的元素之后插入内容	$(A).append(B) 将B插入到匹配的A后面
insertAfter()	将元素插入到指定的元素后面与after()正好颠倒即不是将B插入到A后面而是将A插入到B后面	$(A).appendTo(B) 将A插入到B后面

同样假设<body>标签内部有“ 我想说：Hello... ”代码行

js中写入以下代码：

$("p").after("<b>Hi!</b>");

运行结果图：

同样换成insertAfter()方法运行以下代码：

$("<b>Hi!</b>").insertAfter("p");

运行结果同上。
总结的说，如果希望实现将HTML结构由

我想说：Hello... 变成我想说：Hello...Hi!

after()和insertAfter()两种方法都可以。但是要注意前后括号的位置关系。

所以before() 和insertBefore()、after和insertAfter()方法是往指定元素的外部插入新的节点。
不同的是 before()和insertBefore()是在元素之前添加新内容。即元素的外部的前边。
而after和insertAfter()方法是在元素之后添加新内容。即元素的外部的后边。

attend() 和attendTo()、prepend和prependTo()方法是往指定元素的内部插入新的节点。
不同的是prepend和prependTo()方法是在元素中的前边添加新内容。即元素的内部的前边。
而attend() 和attendTo()是在元素中的后边添加新内容。即元素的内部的后边。

Ashe And Wine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery DOM操作之插入节点

插入节点将新创建的节点插入到某个文档的方法并非只有常见的append()，在jQuery中还提供了其他几种插入节点的方法，如表一、append( ) 、appendTo( ) -- 在元素内部的后面追加 append()向匹配的元素内部的后面追加内容$(A).append(B)将B追加到匹配的A中appendTo()
复制链接

扫一扫

专栏目录