<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
// 通过html的字符串的方式添加节点性能最高
//$('#div1').html($('#div1').html()+'<a href="#">链接</a>')
// 预生成要新建的元素,
el_a = $('<a href="#">div子级最后插入</a>');
// 在指定元素的子级的最后插入元素
$('#div1').append(el_a);
// 在指定元素的子级的最前插入元素
$('#div1').prepend('<p>div子级最前插入</p>');
// 在指定元素的同级的后面插入元素
h2 = $('<h2>div同级最后插入</h2>')
$('#div1').after(h2);
// 在指定元素的同级的前面插入元素
$('#div1').before('<h3>div同级最前插入</h3>');
})
</script>
</head>
<body>
<div id="div1">
<h1>指定元素的初始子元素</h1>
</div>
</body>
</html>