jQuery老仙，法力无边，添加新的元素或内容，对老仙来说是非常轻松的事情~

添加新的HTML内容

老仙提供了如下4种常用的方式来添加新元素：

• append() - 在指定元素内的结尾部分添加新元素（运行一下）
• prepend() - 在指定元素内的开始部分添加新元素（运行一下）
• after() - 在指定元素后面添加新元素（运行一下）
• before() - 在指定元素前面添加新元素（运行一下）

append() 方法

通过jQuery的append()方法，可以在指定元素内的结尾部分插入新的元素。

$("p").append( "这是新加的文本内容。" );

运行一下

prepend() 方法

通过jQuery的append()方法，可以在指定元素内的开始部分插入新的元素。

$("p").prepend( "这是新加的文本内容。" );

运行一下

after() 方法

通过jQuery的after()方法， 在指定元素后面添加新元素。

$("button").click(function(){
    $("#jerk").after("<p><b>死亦为鬼雄！</b></p>");
});

运行一下

before() 方法

通过jQuery的before()方法， 在指定元素前面添加新元素。

$("button").click(function(){
    $("#jerk").before("<p><b>做鬼也风流</b></p>");
});

运行一下

---

本节已经学完，可以直接跳到下一节继续学习；下方在更详细地介绍创建HTML新元素的三种方式，属于细节问题，大致看一下就好啦，孰能生巧，日后自会。

---

创建新的HTML元素

在添加新的HTML元素前，可以有三种方式创建新的HTML元素：

• 直接通过HTML源码来裸写，比如var txt="<p>反清复明</p>";
• 通过jQuery来创建，如var txt = $("<p></p>").text("反清复明");
• 通过DOM的方式来创建，并用JavaScript来设置元素HTML内容，例如var txt = document.createElement("p"); txt.innerHTML = "反清复明";

一个比较连贯的例子：

var txt1 = "<b>jQuery</b>"; //使用HTML源码直接裸写创建新元素
var txt2 = $("<i></i>").text("老仙，"); // 使用jQuery创建
var txt3 = document.createElement("b");// 使用DOM创建
txt3.innerHTML = "法力无边！";
$("img").after(txt1, txt2, txt3); // 一次性插入三个新的元素

运行一下