思洋互动网站建设学前班

内容添加（2）

可以修改上面的代码如下：

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

上述代码的效果如图3.24所示。

2．向外部添加函数

前面介绍了如何使用内部添加函数向DIV中添加内容。下面来看一下如何使用外部添加函数。外部添加函数包括after()、before()。这两个函数表示对当前匹配的元素做添加操作。

图3.24  向DIV内添加内容二

（1）jQuery函数after()--外部添加元素内容

该函数在每个匹配的元素之后插入内容。其语法形式如下：

1. after(content|fn) 

注：fn函数必须返回一个HTML字符串。

（2）jQuery函数before()--外部添加元素内容

该函数在每个匹配的元素之前插入内容。其语法形式如下：

1. before(content|fn) 

注：fn函数必须返回一个HTML字符串。

在使用这两个函数的时候需要先获取DIV内的子元素才可进行操作。可以将上面的代码修改如下：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#append").click(function(){  
4. 4           $("#div1").children().after($("#txt").val());  
5.             //在div1的子元素后插入文本框内容  
6. 5       });  
7. 6       $("#prepend").click(function(){  
8. 7           $("#div1").children().before($("#txt").val());  
9.             //在div1的子元素前插入文本框内容  
10. 8       });  
11. 9   });  
12. 10</script> 

 

上述代码获取DIV内的子元素，并在子元素外添加内容来实现在DIV中添加内容，效果如图3.25所示。

对于外部插入函数，也有类似于内部插入函数的反调用形式，即插入内容调用方法，如insertAfter()、insertBefore()。这两个函数就是待插入的内容调用函数，插入位置作为参数传递给函数。

（3）jQuery函数insertAfter()--外部插入元素内容

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

 

1. insertAfter(content)