JQuery中html、append、appendTo、after、insertAfter 等使用

本文详细介绍了JQuery中常用的DOM操作方法,包括html(), append(), appendTo(), after(), before(), insertAfter(), insertBefore(), empty() 和 remove()等方法的具体用法及区别。通过实例展示了这些方法如何改变网页结构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.html方法,给元素添加html代码或者清空html代码(参数为空字符串);
2.append向元素的末尾添加html代码;
3.appendTo这个方法跟append方法的很像,只是要添加的html代码的目标有所不一样;
4.after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入;
5.before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插入;
6.insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入;
7.insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入;
8.empty清空元素内部的html代码,它只是清空内部的html代码,但是标记仍然留在DOM中;
9.remove从DOM中移除整个元素

下面进行简单的测试和验证,首先是页面结构:
JQuery中html、append、appendTo、after、insertAfter 等使用
对应的效果如下:
JQuery中html、append、appendTo、after、insertAfter 等使用
一、html()方法 $(selector).html(content);
JQuery中html、append、appendTo、after、insertAfter 等使用
注意,这里所填写的html()方法中的代码是不完整的。
查看结果:
JQuery中html、append、appendTo、after、insertAfter 等使用
查看对应的最终代码:
JQuery中html、append、appendTo、after、insertAfter 等使用
这是完整的html代码,也就是说JQuery为我们补全了代码,为我们带来了方便,但是当我们需要精确控制html代码的时候,需要注意这一点。
html函数的作用原理首先是移除目标元素内部的html代码,然后将新代码添加到目标元素。
二、append()方法 $(selector).append(content);
JQuery中html、append、appendTo、after、insertAfter 等使用
查看结果:
JQuery中html、append、appendTo、after、insertAfter 等使用
查看对应的最终代码:
JQuery中html、append、appendTo、after、insertAfter 等使用
由此可见,append的内容添加到了选中内容的内部,并且对其原有的内容不影响。

三、appendTo()方法 $(content).appendTo(selector);
JQuery中html、append、appendTo、after、insertAfter 等使用
查看结果
JQuery中html、append、appendTo、after、insertAfter 等使用
查看对应的最终代码:
JQuery中html、append、appendTo、after、insertAfter 等使用
appendTo()和append效果相同,只是写法不同。
四、after()方法 $(selector).after(content);
JQuery中html、append、appendTo、after、insertAfter 等使用
查看结果:
JQuery中html、append、appendTo、after、insertAfter 等使用
查看对应的最终代码:
JQuery中html、append、appendTo、after、insertAfter 等使用
after()方法将html代码插入到指定元素的后面,如果后面有元素,则将元素后移,再插入html代码。
insertAfter()和after()使用的方法和效果相同,只是写法不同:
JQuery中html、append、appendTo、after、insertAfter 等使用
同理,before()方法将html代码插入到指定元素前面,如果前面有元素,则将元素前移,再插入html代码。

insertBefore()和before()使用的方法和效果也相同。如下:
JQuery中html、append、appendTo、after、insertAfter 等使用
JQuery中html、append、appendTo、after、insertAfter 等使用

五、empty()方法 $(selector).empty();
JQuery中html、append、appendTo、after、insertAfter 等使用
查看结果:
JQuery中html、append、appendTo、after、insertAfter 等使用
查看对应的最终代码:
JQuery中html、append、appendTo、after、insertAfter 等使用
可以看出,使用empty()方法,被选中的元素中的html内容都被清除了,但元素本身还存在。
六、remove()方法 $(selector).remove;
JQuery中html、append、appendTo、after、insertAfter 等使用
查看结果:
JQuery中html、append、appendTo、after、insertAfter 等使用
查看对应的最终代码:
JQuery中html、append、appendTo、after、insertAfter 等使用
可以发现,使用remove()方法,被选中的整个元素包括其内部的子元素都被移除了(remove方法将目标元素整个的从DOM中移除)。

转载于:https://blog.51cto.com/13164896/2066387

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值