前端之家收集整理的这篇文章主要介绍了
jQuery学习之DOM节点的插入方法总结,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
本文主要总结了jQuery中DOM节点的插入方法,以及各种方法的注意点,下面话不多说,来看看详细的介绍吧。
一、内部插入append()与appendTo()
- append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似。
- appendTo:实际上,使用这个方法是颠倒了常规的
$(A).append(B)
的操作,即不是把B追加到A中,而是把A追加到B中。
append()
和appendTo()
两种方法功能相同,主要的不同是语法——内容和目标的位置不同,append()
前面是要选择的对象,后面是要在对象内插入的元素内容,appendTo()
前面是要插入的元素内容,而后面是要选择的对象。
函数的前面,
//参数是将要插入的
内容。
$(".content").append('
')
})
$("#bt2").on('click',function() {
//.appendTo()刚好相反,内容在方法前面,
//无论是一个选择器表达式 或创建作为标记上的标记
//它都将被插入到目标容器的末尾。
$('<div class="appendTo">通过appendTo方法添加的元素
').appendTo($(".content"))
})
添加一个新的p节点
$('.aaron1').prepend('
prepend增加的p元素
')
})
$("#bt2").on('click',function() {
//找到class="aaron2"的div节点,然后通过prependTo内部的首位置
添加一个新的p节点
$('
prependTo增加的p元素
').prependTo($('.aaron2'))
})
不支持
多参数
$('
方法增加
','
多参数
').insertBefore($(".test1"))
})
$("#bt2").on('click',function() {
//在test2元素前后插入集合中每个匹配的元素,不支持多参数
$('<p style="color:red">测试insertAfter方法增加
','<p style="color:red">
多参数').insertAfter($(".test2"))
})