Web网页设计之jQuery_5. jQuery操作DOM元素(下)

接着上一个继续说

四、使用 jQuery 添加 DOM 元素

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

1. append() & prepend()

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

Web网页设计之jQuery_5. jQuery操作DOM元素(下)

我们来点击测试一下

Web网页设计之jQuery_5. jQuery操作DOM元素(下)

是OK的,没有问题

2. after() & before()

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

Web网页设计之jQuery_5. jQuery操作DOM元素(下)

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

Web网页设计之jQuery_5. jQuery操作DOM元素(下)

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

Web网页设计之jQuery_5. jQuery操作DOM元素(下)

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

五、使用 jQuery 删除 DOM 元素

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

1. remove()

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

Web网页设计之jQuery_5. jQuery操作DOM元素(下)

我们来点击一下 remove 按钮

Web网页设计之jQuery_5. jQuery操作DOM元素(下)

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

2. empty()

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

Web网页设计之jQuery_5. jQuery操作DOM元素(下)

 

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

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