前言
最近这个项目，由于某些原因，用的js框架是年迈的jQuery。项目中免不了需要添加DOM的操作，自己也老是搞混JQ添加DOM的方法，虽然简单，但是偶尔还是要去看文档用法，觉得文字记忆有点不模糊，于是觉得结合图片来总结一下。
jQuery添加元素的方法
1.before() - 在被选元素之前插入内容
2.after() - 在被选元素之后插入内容
3.prepend() - 在被选元素的开头插入内容
4.append() - 在被选元素的结尾插入内容
添加元素方法图示
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>JQ插入元素</title>
</head>
<style>
.container {
60%;
margin: 0 auto;
}
#content {
background: #f2f2f2;
padding: 20px;
text-align: center;
}
.btn-group {
margin-top: 20px;
}
p {
color: #f00;
font-weight: bold;
}
</style>
<body>
<h1>JQ插入元素---before、after、append、prepend</h1>
<div class="container">
<div id="content">
<div class="text">我是内容一</div>
</div>
<div class="btn-group">
<button>在content前面插入元素（外部）</button>
<button>在content后面插入元素（外部）</button>
<button>在text前面插入元素（内部）</button>
<button>在text后面插入元素（内容）</button>
</div>
</div>
<script ="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var $container = $('#content');
var $test1 = $('.text');
var btns = $('button');
var $h2 = $('h2');
var $ele1 = $('<p>我是插入的内容1</p>')
var $ele2 = $('<p>我是插入的内容2</p>')
var $ele3 = $('<p>我是插入的内容3</p>')
var $ele4 = $('<p>我是插入的内容4</p>')
btns.on('click', function () {
var index = $(this).index(); //获取点击元素的索引
switch (index) {
case 0:
// 在content前面插入元素（外部）
$container.before($ele1)
break;
case 1:
// 在content后面插入元素（外部）
$container.after($ele2)
break;
case 2:
// 在text前面插入元素（内部）
$container.prepend($ele3); //父元素添加子元素
// $ele3.prependTo($container) //子元素加入到父元素中
break;
case 3:
// 在text后面插入元素（内容）
$container.append($ele4)
// $ele3.appendTo($container) //子元素加入到父元素中
break;
}
})
</script>
</body>
</html>