Web网页设计之jQuery_5. jQuery操作DOM元素（下）

接着上一个继续说

四、使用 jQuery 添加 DOM 元素

我们还可以使用 jQuery 进行动态的添加数据，好比我们给一个 ul 标签中多添加一个 li，我们来看一下有那些添加方式

1. append() & prepend()

append 是在元素内部节点后面进行添加，prepend 是在元素内部节点前面进行添加

我们来点击测试一下

是OK的，没有问题

2. after() & before()

这两个同样，也是可以进行添加 DOM 元素，和上面内俩不同的是，他俩是在元素外进行添加，我们再来看一下

我们再来看一下这个会添加成什么样子

可以看到，不是很对齐了，我们查看一下源码

可以看到，这个 after 和 before 添加的 DOM 都跑到目标元素外面去了

五、使用 jQuery 删除 DOM 元素

有添加就会有删除，我们看看如何去删除

1. remove()

这个删除，可以将我们选中的元素，直接移除 body，包括父节点

我们来点击一下 remove 按钮

可以看到，整个 div都没有了

2. empty()

empty 和 remove 不同的是，empty 不会将父节点也删除了，我们再来点击一下 empty

 

先到这里，大家好好消化，这个具体操作 DOM 节点的方法还有很多，具体的大家可以看一下 jQuery 官网，有问题可以联系我QQ：2100363119

欢迎大家登录我的官网，官网地址：https://www.lemon1234.com