jQuery - 添加元素
使用 jQuery，可以轻松添加新元素/内容。
添加新的 HTML 内容
我们将了解四种用于添加新内容的 jQuery 方法：
append()- 在所选元素的末尾插入内容prepend()- 在所选元素的开头插入内容after()- 在选定元素之后插入内容before()- 在所选元素之前插入内容
jQuery的append()方法
jQueryappend()方法在所选 HTML 元素的末尾插入内容。
jQuery prepend() 方法
jQueryprepend()方法在所选 HTML 元素的开头插入内容。
使用append()和prepend()添加几个新元素
在上面的两个示例中，我们仅在所选 HTML 元素的开头/结尾处插入了一些文本/HTML。
然而，两者append()和prepend()方法可以采用无限数量的新元素作为参数。新元素可以使用文本/HTML（就像我们在上面的示例中所做的那样）、使用 jQuery 或使用 JavaScript 代码和 DOM 元素生成。
在下面的示例中，我们创建了几个新元素。这些元素是使用文本/HTML、jQuery 和 JavaScript/DOM 创建的。然后我们将新元素附加到文本中append()方法（这适用于prepend()也） ：
示例
function appendText() {
var txt1 = "<p>Text.</p>"; // Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
亲自试一试 »
jQuery after() 和 before() 方法
jQueryafter()方法在选定的 HTML 元素之后插入内容。
jQuerybefore()方法在选定的 HTML 元素之前插入内容。
使用 after() 和 before() 添加几个新元素
另外，两者after()和before()方法可以采用无限数量的新元素作为参数。新元素可以使用文本/HTML（就像我们在上面的示例中所做的那样）、使用 jQuery 或使用 JavaScript 代码和 DOM 元素生成。
在下面的示例中，我们创建了几个新元素。这些元素是使用文本/HTML、jQuery 和 JavaScript/DOM 创建的。然后我们将新元素插入到文本中after()方法（这适用于before()也） ：
示例
function afterText() {
var txt1 = "<b>I </b>"; // Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // Insert new elements after <img>
}
亲自试一试 »
jQuery 练习
jQuery HTML 参考
有关所有 jQuery HTML 方法的完整概述，请访问我们的jQuery HTML/CSS 参考。
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!