前端提高篇(九十一)：jQuery的DOM操作：插入操作

效果：

在第2个p标签前面插入h2：

$(‘p’).before(function(index, value){

if (index == 1){

return $(‘h2’);

}

});

效果：

1.1.3 传入html字符串：

往li前插入一个span标签

$(‘li’).before(‘this is a span’);

效果：

1.2 insertBefore()

功能：A.insertBefore(B); 把A插在B的前面

返回：返回A的jQuery对象

与before()区别：位置颠倒，返回的jQuery对象不同，便于链式操作

after()和insertAfter()同理

1.3 after()

功能：A.after(B)，A的后面是B

1.4 insertAfter()

功能：A.insertAfter(B)，A放在B的后面

2.append()、appendTo()、prepend()、prependTo()：调用者与被调用者在调用后是父子关系

---

2.1 append()

功能：A.append(B)，在A的最后一个子元素后面添加一个B

参数：jQuery对象，元素dom，函数，html字符串

返回：A的jQuery对象（A为父）

2.2 appendTo()

功能：A.appendTo(B)，将A添加到B的最后一个子元素后面

参数：jQuery对象，元素dom，函数，html字符串

返回：A的jQuery对象（A为子）

2.3 prepend()

功能：A.prepend(B)，在A的第一个子元素前面添加一个B

参数：jQuery对象，元素dom，函数，html字符串

返回：A的jQuery对象（A为父）

2.4 prependTo()

功能：A.prependTo(B)，将A添加到B的第一个子元素前面

参数：jQuery对象，元素dom，函数，html字符串

返回：A的jQuery对象（A为子）

demo：点击添加按钮，弹出弹框，输入文本，插入到列表中

html：

• 1