jQuery向页面中添加元素

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

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

[javascript]  view plain  copy

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

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

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

[javascript]  view plain  copy

1. var boarddiv = "<div style='background:white;width:100%;height:100%;z-index:999;position:absolute;top:0;margin-top:100px;'>加载中...</div>";   
2. $(window).load(function(){   
3. $(document.body).append(boarddiv);   
4. });  

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

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

HTML代码如下：

[html]  view plain  copy

1. <ol>  
2. <li>List item 1</li>  
3. <li>List item 2</li>  
4. <li>List item 3</li>  
5. </ol>  

JavaScript代码如下：

[javascript]  view plain  copy

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

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

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

html代码如下：

[html]  view plain  copy

1. <ol id="charts"></ol>  

JavaScript代码如下：

[javascript]  view plain  copy

1. //用jQuery语法$("<li></li>")定义一个<li>对象  
2. var chart = $("<li class='li'><div id=\"container_" + kpis + "\" class=\"style\” style=\"min-width:700px;height:400px\"></div></li>");  
3. //用append()方法追加到<ol>标签的结尾  
4. $("#charts").append(chart);  

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

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