添加内容

正如我们在以前的课程中所看到的，html（）和text（）方法可以用于获取和设置所选元素的内容。 然而，当这些方法用于设置内容时，现有内容将丢失。

jQuery具有用于将新内容添加到所选元素而不删除现有内容的方法：

append（）在所选元素的末尾插入内容。

prepend（）在所选元素的开头插入内容。

after（）插入所选元素后的内容。

before（）在所选元素之前插入内容。

append（）方法在所选HTML元素的末尾插入内容。

例如：

HTML：

<p id="demo">Hi </p>

JS:

$(function() {
  $("#demo").append("David");
});
//最终输出 "Hi David"

类似地，prepend（）方法将插入所选元素的开始内容。 
您还可以使用HTML标记的内容。

jQuery after（）和before（）方法在所选HTML元素之前插入内容。

例如:

HTML:

<p id="demo">Hi</p>

JS:

$(function() {
  $("#demo").before("<i>Some Title</i>");   
  $("#demo").after("<b>Welcome</b>");
});

append（），prepend（），before（）和after（）方法也可用于添加新创建的元素。

使用jQuery创建新HTML元素的最简单方法如下：

var txt = $("<p></p>").text("Hi");

上面的代码创建一个新的<p>元素，其中包含文本Hi，并将其分配给一个名为txt的变量。

现在，我们可以将该变量作为上述方法的参数添加到我们的HTML中，例如：

HTML：

<p id="demo">Hello</p>

JS:

$(function() {
  var txt = $("<p></p>").text("Hi");
  $("#demo").after(txt);

});

这将在#demo段落之后插入新创建的<p>元素。

您也可以通过使用逗号分隔来指定多个元素作为before（），after（），append（），prepend（）方法的参数：$（“＃demo”）。append（var1，var2，var3）。

The above mentioned syntax for creating elements can be used to create any new HTML element, 
for example $("<div></div>") creates a new div.