jQuery - 添加元素
使用 jQuery，可以轻松添加新元素/内容。
添加新的 HTML 内容
我们将介绍四种用于添加新内容的 jQuery 方法：
append()- 在选定元素的末尾插入内容prepend()- 在选定元素的开头插入内容after()- 在选定元素之后插入内容before()- 在选定元素之前插入内容
jQuery append() 方法
jQuery append() 方法在选定 HTML 元素的末尾插入内容。
jQuery prepend() 方法
jQuery prepend() 方法在选定 HTML 元素的开头插入内容。
使用 append() 和 prepend() 添加多个新元素
在上面两个示例中，我们只在选定 HTML 元素的开头/结尾插入了一些文本/HTML。
但是，append() 和 prepend() 方法都可以接受无限数量的新元素作为参数。新元素可以通过文本/HTML（如上面示例所示）、jQuery 或 JavaScript 代码和 DOM 元素来创建。
在以下示例中，我们创建了多个新元素。这些元素是通过文本/HTML、jQuery 和 JavaScript/DOM 创建的。然后，我们使用 append() 方法将新元素追加到文本中（对 prepend() 也会起作用）。
示例
function appendText() {
var txt1 = "<p>文本。</p>"; // 用 HTML 创建元素
var txt2 = $("<p></p>").text("文本。"); // 用 jQuery 创建
var txt3 = document.createElement("p"); // 用 DOM 创建
txt3.innerHTML = "文本。";
$("body").append(txt1, txt2, txt3); // 追加新元素
}
自己动手试一试 »
jQuery after() 和 before() 方法
jQuery after() 方法在选定 HTML 元素之后插入内容。
jQuery before() 方法在选定 HTML 元素之前插入内容。
使用 after() 和 before() 添加多个新元素
同样，after() 和 before() 方法都可以接受无限数量的新元素作为参数。新元素可以通过文本/HTML（如上面示例所示）、jQuery 或 JavaScript 代码和 DOM 元素来创建。
在以下示例中，我们创建了多个新元素。这些元素是通过文本/HTML、jQuery 和 JavaScript/DOM 创建的。然后，我们使用 after() 方法将新元素插入到文本中（对 before() 也会起作用）。
示例
function afterText() {
var txt1 = "<b>我 </b>"; // 用 HTML 创建元素
var txt2 = $("<i></i>").text("爱 "); // 用 jQuery 创建
var txt3 = document.createElement("b"); // 用 DOM 创建
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // 在 <img> 之后插入新元素
}
自己动手试一试 »
jQuery 练习
jQuery HTML 参考
要查看所有 jQuery HTML 方法的完整概述，请访问我们的 jQuery HTML/CSS 参考。
