您的位置：首页 > 移动开发

Jquery &lt;不想工作系列&gt;--整理一下append、prependTo、after的区别

2016-03-11 14:58 197 查看

还有其他类似方法，以后再加，直接上代码和图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
div{
border:1px solid black;

}
#div1{
height:100px;
width:100px;
background-color:red;
}
#div2{
height:50px;
width:50px;
background-color:yellow;
}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script type="text/javascript">
function append1(){
$("#div1").append($("#div2"));
}

function prependTo1(){
$("#div2").prependTo($("#div1"));
}

function after1(){
$("#div1").after($("#div2"));
}
</script>

</head>

<body>

<div id="div1">div1</div>
--分割线--
<div id="div2">div2</div>

<input type="button" value="append" onclick="append1();"></input> 
<input type="button" value="prependTo" onclick="prependTo1();"></input> 
<input type="button" value="after" onclick="after1();"></input> 
</body>
</html>

`页面初始化

·append

·prependTo

·after

大小: 3.5 KB

大小: 3.3 KB

大小: 3.6 KB

大小: 3.5 KB

查看图片附件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Jquery &amp;lt;不想工作系列&amp;gt;--整理一下append、prependTo、after的区别

Jquery <不想工作系列>--整理一下append、prependTo、after的区别