jQuery之添加节点的几种方式

目录

一、append()

1、基本使用

2、获取一个dom节点然后通过追加到指定元素里面，相当于把这个元素剪切，然后作为追加指定元素中的最后一个子元素

二、prepend()

三、before()

四、after()

五、appendTo()

一、append()

1、基本使用

• 把元素追加到父元素里面，并且是最后一个

// 1、创建一个li标签
var li = $('<li>我是郑建</li>')
// 2、添加到ul中的元素后面
$('ul').append(li)

2、获取一个dom节点然后通过追加到指定元素里面，相当于把这个元素剪切，然后作为追加指定元素中的最后一个子元素

// 1、获取一个li节点
var li = $('li')
// 2、把这个li标签剪切复制到ul中作为最后一个子元素
$('ul').append(li)

二、prepend()

用法同append()

三、before()

• 元素B.before(A), 就是把元素A插入到元素B前面，作为兄弟元素添加

var div1 = $('<div>我是新建的div</div>')
$('#div2').before(div1)

四、after()

• 元素A.before(B), 就是把元素B插入到元素A后面，作为兄弟元素添加

var div1 = $('<div>我是新建的div</div>')
$('#div2').after(div1)

五、appendTo()

• 语法：子元素.appendTo(父元素)；// 把子元素作为父元素的最后一个子元素添加

var li = $('<li>我是郑建</li>')
li.appendTo($('ul'))