标签：jQuery box Educoder DOM 元素 prepend 添加 内容 append

任务描述

本关任务：用jQuery添加元素，显示效果如下图。

相关知识

为了完成本关任务，你需要掌握：1.append()，prepend()，2.before()，after()。

基本的html结构如下：

1. <button class="btn1">添加内容 </button>
2. <button class="btn2">添加内容 </button>
3. <div class="box">
4. <h3>jquery可以链式调用</h3>
5. </div>

效果如下：

元素内添加

需要实现的效果如下：

如何给类名为box的元素添加内容呢？ 这里介绍两个方法：append()和prepend()，实现代码如下：

1. $(".btn1").click(function(){
2. $(".box").prepend("<p>头部添加内容</p>")
3. })
4. $(".btn2").click(function(){
5. $(".box").append("<p>尾部添加内容</p>")
6. })

可以看出：

• append()在被选元素的结尾插入内容；

• prepend()在被选元素的头部插入内容。

元素外添加

需要实现的效果如下：

如何实现上面效果呢？ 这里介绍两个方法：before()和after()，实现代码如下：

1. $(".btn1").click(function(){
2. $(".box").before("<p>头部添加内容</p>")
3. })
4. $(".btn2").click(function(){
5. $(".box").after("<p>尾部添加内容</p>")
6. })

可以看出：

• before()在被选元素之前插入内容；

• after()在被选元素之后插入内容。

注意：要和 append()，prepend()区分开来。

标签：jQuery,box,Educoder,DOM,元素,prepend,添加,内容,append
来源： https://www.cnblogs.com/Tim161718/p/16325366.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。