Educoder jQuery DOM操作 第3关：jQuery添加元素

任务描述

本关任务：用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()区分开来。