添加新内容有四种方法：
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); }) })
效果如图：
