博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery after append appendTo三个函数的区别
阅读量:7153 次
发布时间:2019-06-29

本文共 1544 字,大约阅读时间需要 5 分钟。

jq文档的说明是

1、after函数

定义和用法:

after() 方法在被选元素后插入指定的内容。

语法:

$(selector).after(content)

实例:

<html>

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
    $("span").after("<a href="#">ddddd</a>")

  })

})
</script>
</head>

<body>

<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>

结果如下:

<span>aaaaaaaaaaaaaaa</span>

<a href="#">ddddd</a>

span标签后面多了一个a标签

 

2、append函数

定义和用法:

append() 方法在被选元素的结尾(仍然在内部)插入指定内容。

语法:

$(selector).append(content)

实例:

<html>

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
    $("span").append("<a href="#">ddddd</a>")

  })

})
</script>
</head>

<body>

<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>

 

结果如下:

<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>

span标签里面多了一个a标签

 

 

3、appendTo函数

定义和用法:

appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。

语法:

$(content).appendTo(selector)实例:

<html>

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
   // $("span").appendTo("<a href="#">ddddd</a>"),这样的写法是不正确的

$("<a href="#">ddddd</a>").appendTo("span")

  })

})
</script>
</head>

<body>

<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>

 

结果如下:

<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>

span标签里面多了一个a标签

效果和append函数是一样,只不过它们的写法是反着来写的而已

 

转载于:https://www.cnblogs.com/xuxiuxiu/p/3927229.html

你可能感兴趣的文章
iOS开发-- 使用NSNumber将int、float、long等数据类型加入到数组或字典中
查看>>
Java Persistence with MyBatis 3(中国版) 第五章 与Spring集成
查看>>
Java虚拟机详解04----GC算法和种类【重要】
查看>>
Receiver type for instance message is a forward
查看>>
将SALT_STACK的JOB-CACHE放到数据库中,而建库用DJANGO的ORM完成
查看>>
GPIO推挽输出和开漏输出详解
查看>>
事务处理和并发控制
查看>>
I18N、L10N、G11N
查看>>
引用类中的enum
查看>>
【转】Android开源项目发现---ListView篇(持续更新)
查看>>
利用锚点制作简单索引效果
查看>>
影响网站打开速度的9大因素
查看>>
HTML5之废弃和更新的元素与属性
查看>>
[转]asp.net解决高并发的方案.
查看>>
(转)unity中基于alpha通道的shadow volume实现
查看>>
linux下svn的co如何排除目录
查看>>
项目中最常用到的颜色
查看>>
[转]10个学习Android开发的网站推荐
查看>>
【linux驱动分析】之dm9000驱动分析(六):dm9000_init和dm9000_probe的实现
查看>>
交大人在各行各业一直不懈追逐着自己的创业梦想,如携程网、
查看>>