1、appendTo() 在元素内容后添加或移动元素
2、prependTo() 在元素内容前添加或移动元素
3、insertAfter() 在元素后添加或移动元素
4、insertBefore() 在元素前添加或移动元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 中的方法</title>
<style>
body{
margin: 0;
padding: 0;
}
.wrap{
width: 1200px;
margin: auto;
}
.header,.footer{
height: 88px;
font-size: 28px;
line-height: 88px;
text-align: center;
}
.header{
box-shadow: 0 2px 12px 0 #abcdef;
}
.footer{
margin-top: 30px;
background:lightskyblue;
}
.box{
padding: 10px 200px;
margin-top: 30px;
background: #abcdef;
}
p{
background: wheat;
}
</style>
</head>
<body>
<div class="header">jquery 中的方法</div>
<!-- 1、appendTo() -->
<div class="article">
<div class="wrap">
<div class="box one">
<p>内容一</p>
</div>
<div class="box two">
<p>内容二</p>
</div>
<div class="box three">
<p>内容三</p>
</div>
<div class="box four">
<p>内容四</p>
</div>
</div>
</div>
<div class="footer">End..</div>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
var link1 = $('<a href="http://www.php.cn">').text("PHP 中文网")
var link2 =$('<a href="http://www.php.cn">').text("PHP 中文网")
var link3 =$('<a href="http://www.php.cn">').text("PHP 中文网")
var link4 =$('<a href="http://www.php.cn">').text("PHP 中文网")
link1.appendTo($('.one p'))
link2.prependTo($('.two p'))
link3.insertAfter($('.three p'))
link4.insertBefore($('.four p'))
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行图片:
