jQuery添加元素

使用 jQuery，可以轻松添加新元素/内容。

添加新的 HTML 内容
我们将介绍用于添加新内容的四种 jQuery 方法：

append()- 在所选元素的末尾插入内容
prepend()- 在所选元素的开头插入内容
after()- 在选定元素后插入内容
before()- 在选定元素之前插入内容
jQuery append() 方法
jQueryappend()方法在所选 HTML 元素的末尾插入内容。

例子
$("p").append("Some appended text.");
jQuery prepend() 方法
jQueryprepend()方法在所选 HTML 元素的开头插入内容。

例子
$("p").prepend("Some prepended text.");
使用 append() 和 prepend() 添加几个新元素
在上面的两个例子中，我们只在所选 HTML 元素的开头/结尾插入了一些文本/HTML。

但是，append()和prepend()方法都可以将无限数量的新元素作为参数。新元素可以用文本/HTML（如我们在上面的示例中所做）、jQuery 或 JavaScript 代码和 DOM 元素生成。

在以下示例中，我们创建了几个新元素。这些元素由 text/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 元素之前插入内容。

例子
$("img").after("Some text after");

$("img").before("Some text before");
使用 after() 和 before() 添加几个新元素
此外，after()和before()方法都可以将无限数量的新元素作为参数。新元素可以用文本/HTML（如我们在上例中所做的那样）、jQuery 或 JavaScript 代码和 DOM 元素生成。

在以下示例中，我们创建了几个新元素。这些元素由 text/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 方法在 <p> 元素末尾插入文本“YES!”。

$(“p”).
（“是的！”）;

开始练习

jQuery HTML 参考
有关所有 jQuery HTML 方法的完整概述，请访问我