JQuery中html、append、appendTo、prepend、prependTo、after、insertAfter、before、insertBefore、empty、remove的区别

html方法，给元素添加html代码或者清空html代码（参数为空字符串）；
append向元素的末尾添加html代码；
appendTo这个方法跟append方法的很像，只是要添加的html代码的目标有所不一样；
prepend向元素的头部添加html代码；
prependTo和prepend方法很想，区别在于 prependTo() 无法使用函数来插入内容。
after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入；
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插入；
insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；
insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；
empty清空元素内部的html代码，它只是清空内部的html代码，但是标记仍然留在DOM中；
remove从DOM中移除整个元素。

以下就是实例。
代码结构：

<div class="box" id="box">
    <div class="top">top</div>
    <div class="middle">middle</div>
    <div class="bottom">bottom</div>
</div>

style样式：

#box{margin: 0 auto;width: 300px;margin-top: 30px}
#box .top,#box .middle,#box .bottom{
     width: 300px;
     height: 50px;
     border: 1px solid #09BB07;
     text-align: center;
     line-height: 50px;
}

html效果
这里写图片描述
一、html()方法 $(selector).append(content);

$('.middle').html("我是html()方法")

效果如下：
这里写图片描述
结论:也就是说使用html()方法，可以将原来的代码进行替换掉。
html函数的作用原理首先是移除目标元素内部的html代码，然后将新代码添加到目标元素。
在使用html()方法的时候，覆盖所有匹配元素的内容。（个人觉得用“替换”两个字形容比较好）
二、append() 方法和appendTo()方法。
将两个方法一块说，其实就是一个方法的两种写法。

$('.middle').append("<p>我是append方法</p>");
$("<p>我是append方法</p>").appendTo('.middle')

效果都是一样的
这里写图片描述

他们的不同之处，
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

注意appendTo前面一定要是Jquery对象。
(我倒是觉得append()方法,加什么都是可以的，都能添加到上面，但是appendTo在不使用标签进行包住的时候就不行用。至今还没找到对应的结论，还请大神能够给一个合理的解释。)

$("<h1>这个就行</h1>").appendTo('.middle');
$("这个就不行").appendTo('.middle');

三、prepend()方法和prependTo方法
同上，将这两种方法写在一起。
被选元素的开头（仍位于内部）插入指定内容

$('.middle').prepend("<p>我是prepend方法</p>")
$("<p>我是prependTo方法</p>").prependTo('.middle');

效果：
这里写图片描述
四、after()方法和before()方法。
after()方法将html代码插入到指定元素的后面，如果后面有元素，则将元素后移，再插入html代码。
同理，before()方法将html代码插入到指定元素前面，如果前面有元素，则将元素前移，再插入html代码。

$('.middle').after("<p>我是after方法</p>")
$('.middle').before("<p>我是before方法</p>")

效果：
这里写图片描述
他们和append、prepend的区别
append（prepend）实在当前元素内部最后（前面）插入元素（选择器选择元素内部，属于添加子集）
after（before）是在当前元素后面（前面）外部插入元素（选择器是同级关系，即兄弟元素）
五、insertAfter()方法和insertBefore()方法，
insertBefore()和before()使用的方法和效果也相同（同理，与append和appendTo的区别相同。这里就不多说了，可以看下下面的效果）

$("<p>我是insertAfter方法</p>").insertAfter('.middle');
$("<p>我是insertBefore方法</p>").insertBefore('.middle');

效果
这里写图片描述
六、empty()方法 $(selector).empty()

$('.middle').empty()

效果：
这里写图片描述

empty()方法，被选中的元素中的html内容都被清除了，但元素本身还存在。
七、remove()方法 $(selector).remove;

$('.middle').remove();

效果：
这里写图片描述
使用remove()方法，被选中的整个元素包括其内部的子元素都被移除了(remove方法将目标元素整个的从DOM中移除）。

JQuery中html、append、appendTo、prepend、prependTo、after、insertAfter、before、insertBefore、empty、remove的区别

猜你喜欢