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