before/after这些元素之间是兄弟关系
append/prepend这些元素之间是父子关系
before() 在什么前面插入原有的什么元素
可以传选择器 jq对象 函数 还有html字符串
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>dom的插入</title>
<style>
ul {
width: 300px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>我是h2,请把我插入到li前面</h2>
<ul>
<li>我是li</li>
</ul>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$('li').before($('h2'));
</script>
</body>
</html>
![4d432aac18ad2bd0425b0474c189a646.png](https://img-blog.csdnimg.cn/img_convert/4d432aac18ad2bd0425b0474c189a646.png)
$('li').before($('<span>我是span</span>'));
$('li').before('<span>我是span2</span>');
![93ebdf99b1e532188c4b5d0a84cf2ffc.png](https://img-blog.csdnimg.cn/img_convert/93ebdf99b1e532188c4b5d0a84cf2ffc.png)
insertBefore() 把什么插入到什么前面
$('h2').insertBefore('li');
![8ed7f615f0248bdb51f178995638b251.png](https://img-blog.csdnimg.cn/img_convert/8ed7f615f0248bdb51f178995638b251.png)
问: 为什么要有两个一样功能的方法?
答: 为了后续方便链式调用,执行完后return出来的元素是前面的对象。
after() 在什么元素后面插入什么元素
$('li').after($('<span>我是span</span>'));
![5d3700693434f6e7705c136644cd34a2.png](https://img-blog.csdnimg.cn/img_convert/5d3700693434f6e7705c136644cd34a2.png)
insertAfter() 把什么元素插入在什么元素后面
$('h2').insertAfter('li');
![856d9fd5687ad1e1d4477ed3d265183e.png](https://img-blog.csdnimg.cn/img_convert/856d9fd5687ad1e1d4477ed3d265183e.png)
append() 在什么元素下增加什么元素(最后一个)
$('ul').append($('h2'));
![06706db9a18137c5d8a5807a448f0ada.png](https://img-blog.csdnimg.cn/img_convert/06706db9a18137c5d8a5807a448f0ada.png)
appendTo() 把什么增加在什么元素下面(最后一个)
$('h2').appendTo($('ul'));
![df4560b04930384aa932ea008f665c95.png](https://img-blog.csdnimg.cn/img_convert/df4560b04930384aa932ea008f665c95.png)
prepend() 在什么元素下增加什么元素(第一个位置)
$('ul').prepend($('h2'));
![372b71fdbe0caaa7056017417e3bf0c5.png](https://img-blog.csdnimg.cn/img_convert/372b71fdbe0caaa7056017417e3bf0c5.png)
prependTo() 把什么增加在什么元素下面(第一个位置)
$('h2').prependTo($('ul'));
![075badc0491b091b7ee6c4165483b43d.png](https://img-blog.csdnimg.cn/img_convert/075badc0491b091b7ee6c4165483b43d.png)