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>Text.</p>"; // 使用 HTML 创建元素
var txt2 = $("<p></p>").text("Text."); // 使用 jQuery 创建
var txt3 = document.createElement("p"); // 使用 DOM 创建
txt3.innerHTML = "Text.";
$("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>I </b>"; // 使用 HTML 创建元素
var txt2 = $("<i></i>").text("love "); // 使用 jQuery 创建
var txt3 = document.createElement("b"); // 使用 DOM 创建
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // 在 <img> 之后插入新元素
}
亲自尝试 »
jQuery 练习
jQuery HTML 参考
要完整了解所有 jQuery HTML 方法，请访问我们的 jQuery HTML/CSS 参考。
