返回宝典

jQuery 添加元素

上一节 下一节

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); // 一次性插入三个新的元素

运行一下


jQuery 添加元素

上一节 下一节