4月8日作业

<!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>
相关文章
