JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用

太过爱你忘了你带给我的痛 2022-05-09 06:18 249阅读 0赞

[https://www.cnblogs.com/wx1993/p/4806873.html?tdsourcetag=s\_pcqq\_aiomsg][https_www.cnblogs.com_wx1993_p_4806873.html_tdsourcetag_s_pcqq_aiomsg]

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中移除整个元素。

下面进行简单的测试和验证，首先是页面结构：

![781464-20150914121710992-1464338535.png][]

对应的效果如下：

![781464-20150914121726804-1508226182.png][]

一、html()方法      $(selector).html(content);

![781464-20150914121928086-248695131.png][]

注意，这里所填写的html()方法中的代码是不完整的。

查看结果：

![781464-20150914122251898-878165173.png][]

查看对应的最终代码：

![781464-20150914122504195-953976014.png][]

这是完整的html代码，也就是说JQuery为我们补全了代码，为我们带来了方便，但是当我们需要精确控制html代码的时候，需要注意这一点。

html函数的作用原理首先是移除目标元素内部的html代码，然后将新代码添加到目标元素。

二、append()方法   $(selector).append(content);

![781464-20150914123120523-584216395.png][]

查看结果：

![781464-20150914163255336-1850896139.png][]

查看对应的最终代码：

![781464-20150914123046648-456332721.png][]

由此可见，append的内容添加到了选中内容的内部，并且对其原有的内容不影响。

三、appendTo()方法     $(content).appendTo(selector);

![781464-20150914123910898-379039432.png][]

查看结果：

![781464-20150914123850633-1508433843.png][]

查看对应的最终代码：

![781464-20150914124022617-977103961.png][]

appendTo()和append效果相同，只是写法不同。

四、after()方法      $(selector).after(content);

![781464-20150914160222648-1774496524.png][]

查看结果：

![781464-20150914160306336-788077492.png][]

查看对应的最终代码：

![781464-20150914160533336-406918853.png][]

after()方法将html代码插入到指定元素的后面，如果后面有元素，则将元素后移，再插入html代码。

\*insertAfter()和after()使用的方法和效果相同,只是写法不同：

![781464-20150914163101554-2005014856.png][]

同理，before()方法将html代码插入到指定元素前面，如果前面有元素，则将元素前移，再插入html代码。

insertBefore()和before()使用的方法和效果也相同。如下：

![781464-20150914163120914-374777006.png][]

![781464-20150914163010258-360362215.png][]

五、empty()方法      $(selector).empty();

![781464-20150914161344961-669481391.png][]

查看结果：

![781464-20150914161406914-796739531.png][]

查看对应代码：

![781464-20150914161452008-366385239.png][]

可以看出，使用empty()方法，被选中的元素中的html内容都被清除了，但元素本身还存在。

六、remove()方法   $(selector).remove;

![781464-20150914161707695-700157584.png][]

查看结果：

![781464-20150914161723445-2081860736.png][]

查看对应的最终代码：

![781464-20150914161819664-1976571709.png][]

可以发现，使用remove()方法，被选中的整个元素包括其内部的子元素都被移除了(remove方法将目标元素整个的从DOM中移除)。

[https_www.cnblogs.com_wx1993_p_4806873.html_tdsourcetag_s_pcqq_aiomsg]: https://www.cnblogs.com/wx1993/p/4806873.html?tdsourcetag=s_pcqq_aiomsg
[781464-20150914121710992-1464338535.png]: /images/20220509/e942cdf954a34801a9fba7c892a6e2a5.png
[781464-20150914121726804-1508226182.png]: /images/20220509/f8b198c8a8a14b3f8ca6c91ef7838a6c.png
[781464-20150914121928086-248695131.png]: /images/20220509/0bfc4210cfc141f6a7f43c3b43f5f493.png
[781464-20150914122251898-878165173.png]: /images/20220509/b6763a1da401483595a5dacc09f29e03.png
[781464-20150914122504195-953976014.png]: /images/20220509/c3535b279be04acab416c1d2b41e95e9.png
[781464-20150914123120523-584216395.png]: /images/20220509/4c06dddaaf944452a5adbf7391e6a594.png
[781464-20150914163255336-1850896139.png]: /images/20220509/b04c9d2847fc48dc9af2c4d59c55f908.png
[781464-20150914123046648-456332721.png]: /images/20220509/4ba5dd8956c74715bbc0a6555d4775de.png
[781464-20150914123910898-379039432.png]: /images/20220509/7df115e8dc15411c93f1f4fdea2a1b3c.png
[781464-20150914123850633-1508433843.png]: /images/20220509/27b349cf6248455d8d90f8a72f9064f7.png
[781464-20150914124022617-977103961.png]: /images/20220509/ca82432d1be14e158e88679b8d8041d4.png
[781464-20150914160222648-1774496524.png]: /images/20220509/f5a30fa11e5f4268bc0aa766f4784a44.png
[781464-20150914160306336-788077492.png]: /images/20220509/88d181ab7a80411ba268fd1bdf118293.png
[781464-20150914160533336-406918853.png]: /images/20220509/2275240d8d4048188ee592d8f7b54838.png
[781464-20150914163101554-2005014856.png]: /images/20220509/d53ddd4910084bf9bf002328e117e864.png
[781464-20150914163120914-374777006.png]: /images/20220509/c04f6e1048274d6d8dc5908985c3db00.png
[781464-20150914163010258-360362215.png]: /images/20220509/f2000b99983143f4ade8870d6b0a1608.png
[781464-20150914161344961-669481391.png]: /images/20220509/3595f4730c8e496381d281e80813193e.png
[781464-20150914161406914-796739531.png]: /images/20220509/6551e58b8e4d413e88efd4c653ffd1ca.png
[781464-20150914161452008-366385239.png]: /images/20220509/b89c56518b6d4e4881fa465f3832b3f7.png
[781464-20150914161707695-700157584.png]: /images/20220509/c16ce967afb84309b8c8ff4dd11438fd.png
[781464-20150914161723445-2081860736.png]: /images/20220509/19672e4bdf724771a3635060effdf4b2.png
[781464-20150914161819664-1976571709.png]: /images/20220509/94e61e9c455c4cbe8302a68e17ba7a97.png