思洋互动网站建设学前班

内容添加（1）

jQuery本身对于内容的添加分成内部添加和外部添加两种，每种方式又都有前后两种添加位置。

1．向内部添加函数

首先来看内部添加如何操作。DIV的内部添加需要用到jQuery的append()、prepend()函数。这两个函数分别负责在DIV内容的后端和前端添加内容。

（1）jQuery函数append()--添加元素内容

该函数向每个匹配的元素内部追加内容。其语法形式如下：

1. append(content|fn) 

（2）jQuery函数prepend()--添加元素内容

该函数向每个匹配的元素内部前置内容。其语法形式如下：

1. prepend(content|fn) 

 

下面用一个示例来演示如何向DIV中添加内容。HTML代码和CSS样式参考光盘内容。这里直接看一下JavaScript功能实现：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#append").click(function(){  
4. 4           $("#div1").append($("#txt").val());  
5.                                         //将文本框中的内容追加到div1尾部  
6. 5       });  
7. 6       $("#prepend").click(function(){  
8. 7           $("#div1").prepend($("#txt").val());  
9.                                         //将文本框中的内容添加到div1头部  
10. 8       });  
11. 9   });  
12. 10</script> 

上述代码的执行效果如图3.23所示。

图3.23  向DIV内添加内容一

和append()、prepend()这两个函数有相同效果的还有appendTo()、prependTo()。只不过这两个函数的调用者是被添加的元素，而参数是DIV。

（3）jQuery函数appendTo()--添加元素内容

该函数把所有匹配的元素追加到另一个指定的元素集合中。其语法形式如下：

1. appendTo(content) 

（4）jQuery函数prependTo()--添加元素内容

该函数把所有匹配的元素前置到另一个、指定的元素集合中。其语法形式如下：

1. prependTo(content)