上QQ阅读APP看书，第一时间看更新
3.3 在页面中添加元素
表3-1列出了在HTML文档中添加元素需要用到的jQuery方法。
表3-1 动态添加方法列表
append和appendTo、prepend和prependTo具有相同的描述，不同之处在于内容和选择器的位置。
【示例3-3】insert_elements.html
01 <style type="text/css">
02 body, td, th, input {
03 font-size: 9pt;
04 }
05 </style>
06 </head>
07 <body>
08 <div id="idbtn">
09 <input type="button" name="idAppend" id="idAppend" value="append方法" />
10
11 <input type="button" name="idappendTo" id="idappendTo" value="appendTo
方法" />
12
13 <input type="button" name="idpredend" id="idpredend" value="predend方法"
/>
14
15 <input type="button" name="idpredendTo" id="idpredendTo" value="predendTo
方法" />
16
17 <input type="button" name="idbefore" id="idbefore" value="before方法" />
18
19 <input type="button" name="idafter" id="idafter" value="after方法" />
20
21 <input type="button" name="idinsbefore" id="idinsbefore"
value="insertBefore方法" />
22
23 <input type="button" name="idinsafter" id="idinsafter" value="insertAfter
方法" />
24 </div>
25 <div id="idcontent">使用不同的按钮，用不同的方法插入页面<br/></div>
26 </body>
代码中构建了多个不同的按钮，其中每个按钮将对应不同的插入方法。为每个按钮关联的事件处理语句如下：
01 <script type="text/javascript">
02 $(document).ready(function(e) {
03 $("#idAppend").click(
04 function(){
05 //追加内容
06 $("#idcontent").append("<b>使用append添加元素</b><br/>");
07 }
08 );
09 $("#idappendTo").click(
10 function(){
11 //追加内容，语法与append颠倒
12 $("<b>使用appendto添加元素</b><br/>").appendTo("#idcontent");
13 }
14 );
15 $("#idpredend").click(
16 function(){
17 //插入前置内容
18 $("#idcontent").prepend("<b>使用prepend插入前置内容
</b><br/>");
19 }
20 );
21 $("#idpredendTo").click(
22 function(){
23 //在元素中插入前缀元素，与prepend的操作语法颠倒
24 $("<b>使用prependTo添加元素
</b><br/>").prependTo("#idcontent");
25 }
26 );
27 $("#idbefore").click(
28 function(){
29 //在指定元素的前面插入内容
30 $("#idcontent").before("<b>使用before添加元素</b><br/>");
31 }
32 );
33 $("#idafter").click(
34 function(){
35 //在指定元素的后面插入内容
36 $("#idcontent").after("<b>使用after添加元素</b><br/>");
37 }
38 );
39 $("#idinsbefore").click(
40 function(){
41 //在指定元素前面插入内容，与before语法颠倒
42 $("<b>使用insertBefore添加元素</b><br/>").insertBefore("#idcontent");
43 }
44 );
45 $("#idinsafter").click(
46 function(){
47 //在指定元素的后面插入内容，与after的语法颠倒
48 $("<b>使用insertAfter添加元素</b><br/>").insertAfter("#idcontent");
49 }
50 );
51 });
52 </script>
可以看到，每个按钮的事件处理代码中分别调用了不同的插入方法。通过这个示例可以看到各种不同的插入语句的使用方式和语法结构，如append和appendTo、prepend和prependTo就只是选择器不同。示例的运行效果如图3.4所示。
图3.4 不同插入语句的示例效果