添加新内容有四种方法：
append():选中的元素的末尾插入
prepend():选定元素的开头插入
after():在被选元素之后插入
before():在被选元素之前插入
<body>
<p>1</p>
<button>点击添加元素</button>
<script src="../jquery-3.6.0.js"></script>
<script>
$(document).ready(function(){
/* $('button').click(function(){
$('p').append('加了一个append'); //append 在元素后面插入
})
$('button').click(function(){
$('p').prepend('加了一个prepend'); //prepend 在元素前面插入
}) */
$('button').click(function(){
$('p').after('加了一个after'); //after在被选元素之后插入
})
$('button').click(function(){
$('p').before('加了一个before'); //before 在被选元素之前插入
})
})
</script>
</body>
如图：
append和after的区别
append无论什么元素都会插入元素后面
after:如果是行内元素就会显示在元素后面，如果是块元素就会插到元素的下方。
还可以通过 append() 和 prepend() 方法添加若干新元素
//html
<p>这是一个p段落</p>
<button>点击添加文本</button>
<h1></h1>
//jQuery
$(document).ready(function(){
$('button').click(function(){
var txt1 = '<p>这是一个文本1</p>';
var txt2 = $('<p>用jQuery创建的文本</p>');
var txt3 = document.createElement('p');
txt3.innerText='用js创建文本';
$('h1').append(txt1,txt2,txt3);
})
})
效果如图：
\
