jQuery学习四：jQuery如何向页面中添加元素？

利用jQuery向页面中添加元素是常用的功能，我现在遇到的有几种情况，总结一下。

1、如何在文本框后面添加提示信息？

//假设在一id="username"的文本框后面添加“用户名不能为空”的信息
$("#username").after("用户名不能为空");

点评：核心方法是after，after()方法作用是在被选元素之后插入内容。注意区分after()和append()的区别，前者是在被选元素之后（不在被选元素标签里面），后者是在备选元素的结尾（在被选元素标签里面）。

2、如何在页面中添加“加载中”

标签？

var boarddiv = "
加载中...
"; 
$(window).load(function(){ 
$(document.body).append(boarddiv); 
});

点评：这个例子就是微信上常常出现的“加载中”页面，核心方法 是append()方法，作用是在被选元素的结尾插入内容。添加的div比较特殊，因为它的z轴坐标是999，定位为绝对定位，用load()方法自然替换整个页面。

3、如何在页面中添加列表项？

HTML代码如下：

List item 1
List item 2
List item 3

JavaScript代码如下：

 $("ol").append("
Appended item
");

点评：这个方法用的是append()，不能用after()，因为是在

标签里面添加
1. 。

   
   

   4、如何在页面中添加

   列表？

   html代码如下：

   JavaScript代码如下：

   //用jQuery语法$("
   ")定义一个
   对象
   var chart = $("
   ");
   //用append()方法追加到
   标签的结尾
   $("#charts").append(chart);

   点评：1、在定义标签对象的时候，注意双引号的使用，在JS语法中，双引号里面再有引号，要用反斜杠“\”转义或者改成单引号。

   2、如果中间插入变量，要将其余的代码用双引号隔开。3、虽然已经定义了这个标签对象，但是在页面中是没有实际的标签的，所以无法通过$("#.")取到这个标签。