- 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中移除)。