前言
最近這個項目，由於某些原因，用的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 {
width: 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>