收藏
批改状态：合格
老师批语：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li {
background-color: #FCD4FD;
margin-bottom: 10px;
width: 400px;
}
p {
background-color: #E4F4F5;
width: 400px;
}
</style>
</head>
<body>
<ul id="list">
<li>Coffee</li>
<li>Tea</li>
</ul>
<button>测试一下</button>
<p>测试appendTo用法</p>
<p>测试preappendTo用法</p>
<p>测试inserAfter用法</p>
<p>测试insertBefore用法</p>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('button').on('click',function(){
/**content.appendTo(target)
* 参数：要插入的元素
* 功能：插入到目标元素内容后面
* 返回值为jQuery类型，返回表示追加的内容的jQuery对象
*/
//$('<li>').css('background-color','skyblue').text('Water').appendTo('#list')
// $('p:eq(0)').appendTo('#list')
////////////////////////////////////////////////////////
/**
* content.prependTo(target)
* 参数：要插入的元素
* 功能：插入到目标元素内容之前
* 返回值为jQuery类型，返回表示追加的内容的jQuery对象
*/
// $('<li>').css('background-color','wheat').html('Meet').prependTo('#list')
// $('p:eq(1)').prependTo('#list')
////////////////////////////////////////////////////////
/**
* content.insertAfter(target)
* 参数：要插入的节点
* 功能：插入到目标节点之后
* 返回值为jQuery类型，返回表示插入内容的jQuery对象
*/
//$('<p>').css('background-color','lightgreen').html('Milk').insertAfter('#list')
//$('p:eq(2)').insertAfter('#list')
/////////////////////////////////////////////////////////
/**
* content.insertBefore(target)
* 参数：要插入的节点
* 功能：插入到目标元素之前
* 返回值为jQuery类型，返回表示插入内容的jQuery对象
*/
//$('<p>').css('background-color','lightgreen').html('Apple').insertBefore('#list')
$('p:eq(3)').insertBefore('#list')
})
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
