<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>main</title>
<script type="text/javascript" src="../jquery/jquery-1.7.js"></script>
<script type="text/javascript">
//给QJuery区个别名 为了不和别人冲突
var Q=jQuery.noConflict();
var min = {'height':'20px',};
var max={'margin-left':'10px','margin-top':'10px','float':'left','height':'100px','width':'200px','background':'darkgray'}
var x=0;
Q(document).ready(
function(){
Q(".vis").click(function(){
x = x+1;
if(x%2 != 0){
Q("#t").hide();
Q("#c").css(min);
}
else if(x%2==0){
Q("#c").css(max);
Q("#t").show();
}
});
});
Q(document).ready(
function(){
var w = Q("#5").clone();
Q("button").click(function(){
Q("#head").append(w);
alert(w);
});}
);
</script> <style type="text/css">
body {
font-size:12px;
margin:0;
padding:0;
background:lightcyan;
}
#head {
position:relative;
margin: auto; /*---页面居中的写法------*/
width:900px; /*----加了宽度效果就看得出了,原来是全屏的-----*/
}
.bb {
margin-left: 10px;
margin-top:10px;
float:left;
height:100px;
width: 200px;
background:darkgray;
}
</style>
</head>
<body id = "begin">
<div id="head">
<div class="bb" id="c">
1
<div style="float: right">
<img class ="vis" src="../img/min.jpg" style="width: 17px; height: 15px;"/>
<img src="../img/close.jpg" style="width: 17px; height: 15px;"/><br />
</div>
<div id ="t" >sdfsdfdsf</div>
</div>
<div class="bb">2</div>
<div class="bb">3</div>
<div class="bb">4</div>
<div class="bb" id ="5">5</div>
</div>
<button type="button">Click me</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>main</title>
<script type="text/javascript" src="../jquery/jquery-1.7.js"></script>
<script type="text/javascript">
//给QJuery区个别名 为了不和别人冲突
var Q=jQuery.noConflict();
var min = {'height':'20px',};
var max={'margin-left':'10px','margin-top':'10px','float':'left','height':'100px','width':'200px','background':'darkgray'}
var x=0;
Q(document).ready(
function(){
Q(".vis").click(function(){
x = x+1;
if(x%2 != 0){
Q("#t").hide();
Q("#c").css(min);
}
else if(x%2==0){
Q("#c").css(max);
Q("#t").show();
}
});
});
Q(document).ready(
function(){
var w = Q("#5").clone();
Q("button").click(function(){
Q("#head").append(w);
alert(w);
});}
);
</script> <style type="text/css">
body {
font-size:12px;
margin:0;
padding:0;
background:lightcyan;
}
#head {
position:relative;
margin: auto; /*---页面居中的写法------*/
width:900px; /*----加了宽度效果就看得出了,原来是全屏的-----*/
}
.bb {
margin-left: 10px;
margin-top:10px;
float:left;
height:100px;
width: 200px;
background:darkgray;
}
</style>
</head>
<body id = "begin">
<div id="head">
<div class="bb" id="c">
1
<div style="float: right">
<img class ="vis" src="../img/min.jpg" style="width: 17px; height: 15px;"/>
<img src="../img/close.jpg" style="width: 17px; height: 15px;"/><br />
</div>
<div id ="t" >sdfsdfdsf</div>
</div>
<div class="bb">2</div>
<div class="bb">3</div>
<div class="bb">4</div>
<div class="bb" id ="5">5</div>
</div>
<button type="button">Click me</button>
</body>
</html>
概述
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。
HTML 代码:
<p>I would like to say: </p>jQuery 代码:
$("p").append("<b>Hello</b>");结果:
[ <p>I would like to say: <b>Hello</b></p> ]上面API描述,就是在指定内容后面追加,不就是按顺序追加么,你想说明啥呢?
<script type="text/javascript">
var i =1;
$(function(){
$("button").click(function(){
$("#head").append("<div>我是添加的第"+i+"个DIV</div>");
});
});
</script>