jQerty动态插入节点方法

最新推荐文章于 2021-08-11 14:48:26 发布

weixin_30381317

最新推荐文章于 2021-08-11 14:48:26 发布

阅读量102

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ziyuemoon/p/5708026.html

本文介绍jQuery中用于元素插入的方法，包括append(), appendTo(), prepend(), prependTo(), before(), after(), insertBefore(), insertAfter()等，并通过实例展示了这些方法的具体应用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按钮练习</title>
<style type="text/css">
body,td,th,input{font-size:12pt;}
#idcontent{border:1px solid #F00;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
//append()方法:在被选元素的结尾（仍然在内部）插入指定内容
$("#idAppend").click(function(){
//追加内容
$("#idcontent").append("<b>使用append添加元素</b><br />");
//点击后在#idcontent里面出现“使用append添加元素”
})

//appendTo（）方法：在被选元素的结尾（仍然在内部）插入指定内容
$("#idppendTo").click(function(){
//追加内容,语法与append相反
$("<b>使用appendTo添加元素</b><br />").appendTo("#idcontent");
//点击后在#idcontent里面出现“使用appendTo添加元素”
})

//predend（）方法：在被选元素的开头（仍然在内部）插入指定内容
$("#idpredend").click(function(){
//插入前置内容
$("#idcontent").prepend("<b>使用predend添加元素</b><br />");
//点击后在#idcontent的原语句下面出现“使用predend添加元素”
})

//predendTo（）方法：在被选元素的开头（仍然在内部）插入指定内容
$("#idpredendTo").click(function(){
//在元素中插入前缀元素，与predend的操作语法相反
$("<b>使用predendTo添加元素</b><br />").prependTo("#idcontent");
//点击后在#idcontent的原语句上面出现“使用predend添加元素”
})

//append和appendTo，perdend和predendTo的关系：两者具有相同的描述
//不同的是内容和选择器的位置

//before：在被选元素的前（在外部）插入指定内容
$("#idbefore").click(function(){
//在指定元素前面插入内容
$("#idcontent").before("<b>使用before添加元素</b><br />");
//点击后在#idcontent的选择器上面出现“使用before添加元素”
})

//after：在被选元素的后面（在外部）插入指定内容
$("#idafter").click(function(){
//在指定元素后面插入内容
$("#idcontent").after("<b>使用after添加元素</b><br />");
//点击后在#idcontent的选择器下面出现“使用after添加元素”
})

//insertbefore：把匹配的元素插入到另一个指定的元素集合的前面
$("#idinbefore").click(function(){

$("<b>使用insertBefore添加元素</b><br />").insertBefore("#idcontent");
//点击后在#idcontent的选择器上面出现
})

//insertafter：把匹配的元素插入到另一个指定的元素集合的后面
$("#idinafter").click(function(){

$("<b>使用insertbefore添加元素</b><br />").insertAfter("#idcontent");
//点击后在#idcontent的选择器下面出现
})

});
</script>
</head>

<body>
<div id="idbtn">
<input type="button" name="idAppend" id="idAppend" value="append方法" />
 
<input type="button" name="idappendTo" id="idappendTo" value="addendTo方法" />
 
<input type="button" name="idpredend" id="idpredend" value="predend方法" />
 
<input type="button" name="idpredendTo" id="idpredendTo" value="predendTo方法" />
 
<input type="button" name="idbefore" id="idbefore" value="before方法" />
 
<input type="button" name="idafter" id="idafter" value="after方法" />
 
<input type="button" name="idinbefore" id="idinbefore" value="insertBefore方法" />
 
<input type="button" name="idinafter" id="idinafter" value="insertAfter方法" />
</div>
<div id="idcontent" >使用不同按钮，用不同方法插入页面<br /></div>
</body>
</html>