jQuery 添加元素包含append(), prepend(), after(), 和 before() 方法，添加新的 HTML 内容append() - 在被选元素的结尾插入内容，prepend() - 在被选元素的开头插入内容，after() - 在被选元素之后插入内容，before() - 在被选元素之前插入内容。

1. 使用 append() 在元素末尾添加内容 


<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery append 示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></head><body><div id="container"><p>原始内容</p></div><button onclick="appendContent()">追加内容</button><script>function appendContent() {// 创建新元素（HTML 字符串）var htmlContent = "<p>这是通过 append() 添加的新段落。</p>";// 使用 append() 方法添加到 #container 的末尾$("#container").append(htmlContent);}</script></body></html>

效果：点击按钮后，#container 元素内部会新增一个段落，位于原有内容的下方。

2. 使用 prepend() 在元素开头添加内容 


<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery prepend 示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></head><body><ul id="list"><li>项目 1</li><li>项目 2</li></ul><button onclick="prependItem()">前置添加</button><script>function prependItem() {// 创建新元素（jQuery 对象）var newItem = $("<li>").text("这是通过 prepend() 添加的新项目");// 使用 prepend() 方法添加到 #list 的开头$("#list").prepend(newItem);}</script></body></html>

效果：点击按钮后，#list 元素内部会新增一个列表项，位于原有内容的上方。

3. 使用 after() 在元素后添加内容 


<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery after 示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></head><body><p id="target">目标元素</p><button onclick="addAfter()">在目标元素后添加</button><script>function addAfter() {// 创建新元素（DOM 对象）var newDiv = document.createElement("div");newDiv.innerHTML = "这是通过 after() 添加的新 div。";// 使用 after() 方法在 #target 元素后添加$("#target").after(newDiv);}</script></body></html>

效果：点击按钮后，#target 元素后会新增一个 div，位于 #target 的兄弟节点位置。

4. 使用 before() 在元素前添加内容 


<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery before 示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></head><body><img id="image" src="https://via.placeholder.com/150" alt="示例图片"><button onclick="addBefore()">在图片前添加</button><script>function addBefore() {// 创建新元素（HTML 字符串 + jQuery 对象）var text1 = "<p>这是通过 before() 添加的文本。</p>";var text2 = $("<span>").text("（用 jQuery 创建）");// 使用 before() 方法在 #image 元素前添加$("#image").before(text1, text2);}</script></body></html>

效果：点击按钮后，#image 元素前会新增一段文本和一个 span，位于 #image 的兄弟节点位置。

5. 批量添加多个元素 


<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery 批量添加元素</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></head><body><div id="batchTarget"><p>原始内容</p></div><button onclick="addMultiple()">批量添加</button><script>function addMultiple() {// 创建多个新元素var html1 = "<p>HTML 创建的段落</p>";var jquery1 = $("<p>").text("jQuery 创建的段落");var dom1 = document.createElement("p");dom1.innerHTML = "DOM 创建的段落";// 使用 append() 一次性添加多个元素$("#batchTarget").append(html1, jquery1, dom1);}</script></body></html>

效果：点击按钮后，#batchTarget 元素内部会新增三个段落，分别通过 HTML 字符串、jQuery 对象和 DOM 方法创建。