jQuery節(jié)點(diǎn)追加
節(jié)點(diǎn)追加
父子關(guān)係追加
append(content):向每個(gè)符合的元素內(nèi)部後置追加內(nèi)容
prepend(content):向每個(gè)符合的元素內(nèi)部前置追加內(nèi)容
#appendTo(content):把所有符合的元素後置追加到另一個(gè)、指定的元素集合中
#prependTo(content):把所有符合的元素前追加到另一個(gè)、指定的元素集合中
#實(shí)例如下：
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function f1(){
//主動(dòng)追加
//新節(jié)點(diǎn)追加
//append() 后置
$("#yi").append("<li>成都市</li>");
//prepend() 前置
$("#yi").prepend("<li>杭州市</li>");
//已有節(jié)點(diǎn)追加(節(jié)點(diǎn)發(fā)生物理位置移動(dòng))
$("#yi").append($("#gai"));
}
function f2(){
//被動(dòng)追加
//appendTo 后置追加
//prependTo 前置追加
//新節(jié)點(diǎn)追加
$("<li>武漢市</li>").appendTo('#yi');
$("<li>天津市</li>").prependTo('#yi');
//$("html標(biāo)簽")---創(chuàng)建節(jié)點(diǎn)--->createElement等方法
//已有節(jié)點(diǎn)追加
$('#er li:eq(1)').appendTo('#yi');
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:pink;}
</style>
</head>
<body>
<ul id="yi">
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ul>
<ul id="er">
<li>福州市</li>
<li>合肥市</li>
<li id="gai">鄭州市</li>
</ul>
<input type="button" value="追加1" onclick="f1()" />
<input type="button" value="追加2" onclick="f2()" />
</body>
</html>##兄弟關(guān)係追加
- after(content):在每個(gè)符合的元素之後插入內(nèi)容
- #before(content):在每個(gè)符合的元素之前插入內(nèi)容
- insertAfter(content):把所有符合的元素插入到另一個(gè)、指定的元素集合的後面
- insertBefore(content):把所有符合的元素插入到另一個(gè)、指定的元素集合的前面 ##例子如下：
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function f1(){
//主動(dòng)追加
//after() 后置追加
//before() 前置追加
//新節(jié)點(diǎn)
$('#yi li:last').after("<li>深圳</li>");
$('#yi li:first').after("<li>成都市</li>");
$('#fei').before("<li>杭州市</li>");
//已有節(jié)點(diǎn)追加
$('#fei').after($('#gai'));
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:pink;}
</style>
</head>
<body>
<ul id="yi">
<li>北京</li>
<li id="fei">上海</li>
<li>廣州</li>
</ul>
<ul id="er">
<li>福州市</li>
<li>合肥市</li>
<li id="gai">鄭州市</li>
</ul>
<input type="button" value="追加1" onclick="f1()" />
</body>
</html>
