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

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

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

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

2、如何在页面中添加“加载中”<div>标签？

var boarddiv = "<div style='background:white;width:100%;height:100%;z-index:999;position:absolute;top:0;margin-top:100px;'>加载中...</div>"; $(window).load(function(){ $(document.body).append(boarddiv); });点评：这个例子就是微信上常常出现的“加载中”页面，核心方法是append()方法，作用是在被选元素的结尾插入内容。添加的div比较特殊，因为它的z轴坐标是999，定位为绝对定位，用load()方法自然替换整个页面。

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

HTML代码如下：

<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> JavaScript代码如下：

$("ol").append("<li>Appended item</li>");

点评：这个方法用的是append()，不能用after()，因为是在<ol>标签里面添加<li>。

4、如何在页面中添加<div>列表？

html代码如下：

<ol id="charts"></ol>JavaScript代码如下：//用jQuery语法$("<li></li>")定义一个<li>对象 var chart = $("<li class='li'><div id=\"container_" + kpis + "\" class=\"style\” style=\"min-width:700px;height:400px\"></div></li>"); //用append()方法追加到<ol>标签的结尾 $("#charts").append(chart);点评：1、在定义标签对象的时候，注意双引号的使用，在JS语法中，双引号里面再有引号，要用反斜杠“\”转义或者改成单引号。

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