收藏
批改状态：合格
老师批语：
语法：
$(content).appendTo(selector)
$(content).prependTo(selector)
$(content).insertBefore(selector)
$(content).insertAfter(selector)
基本文档操作常用方法
操作还是参考老师的做法，没想过其他炫的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.box{width:300px;margin: 0 auto}
</style>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button>appendTo</button>
<button>prependTo</button>
<button>insertAfter</button>
<button>insertBefore</button>
<p>ato</p>
<p>pto</p>
<p>ift</p>
<p>ibf</p>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//创造一个li插入到ul内所有li后面
// $('button').eq(0).on("click",function(){
// var a=$('<li>').text('我要插队')
// a.appendTo($('ul'))
// })
//将一个已存在的元素插入到指定位置
$('button').eq(0).on("click",function(){
var a=$('p').eq(0)
a.appendTo($('ul'))
})
//创造一个li插入到ul内所有li前面
$('button').eq(1).on("click",function(){
var a=$('<li>').text('我要插队')
a.prependTo($('ul'))
})
//创造一个li插入到ul内第二个li后面
$('button').eq(2).on("click",function(){
var b=$('<li>').text('我要插队')
b.insertAfter($('li').eq(2))
})
//创造一个li插入到ul内第二个li前面
$('button').eq(3).on("click",function(){
var b=$('<li>').text('我要插队')
b.insertBefore($('li').eq(2))
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
