实例演示: appendTo(),prependTo()-18-04-08

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入jQuery文件-->
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>jQuery操作DOM节点</title>
    <style>
        body{margin: 0;padding: 0;}
        .main{width: 1200px;height: auto;margin: auto;box-shadow: 3px 3px 5px #888;overflow: hidden; margin-top: 40px;}
        .clearfix:after {  content: ".";  display: block;  height: 0;  clear: both;  visibility: hidden;  zoom: 1;}
        .main ul{margin-top: 20px;margin-bottom: 20px;}
        .main ul li{float: left; list-style: none; padding: 0 35px;}
        .main ul li img{width: 300px; height: 300px;object-fit: cover; box-shadow: 5px 5px 10px #666; border-radius: 50%;}
        .main ul li p{text-align: center; height: 40px; line-height: 40px; margin: 0;}
    </style>
    <script>
        $(function () {
            /*
 1. 父子节点的操作:
    append()向元素内部追回元素
    prepend(): 向元素内部添加前置元素
    appendTo():追回到指定的元素集合中
    prependTo(): 将元素前置到指定集合中

 2. 兄弟节点的操作:
    after(): 在匹配的元素之后插入
    before(): 在匹配的元素之前插入
  */
            //用原生jS添加一个元素
 var ul = document.getElementsByTagName('ul')[0]
//            创建一个li元素
 var li7 = document.createElement('li')
//            给新建li元素增加内容
 li7.innerHTML = '<img src="http://pic.axlcg.com/download/20170526_175547647.jpg" alt=""><p>这个美女</p>'
//            追回元素appendchild是JS原生写法，跟append用法一样
// 如果不引入jquery,append不生效,如果引入了jquery可以写成append
// 其他浏览器下可正常显示，但是IE内核下会报错，所以用原生的话还是要写成appendchild
           ul.appendChild(li7)
//            jQuery写法
 //1.获取ul中的第一个p节点
 var p1=$('p')[0]
            //prepend给第一个li节点的p标签添加前置元素
 p1.prepend('我是本身存在的第一个')
            //prepend给第二个li节点的p标签添加后置元素
 var p2=$('p')[1]
            p2.append('--是原生JS写的')
//             跟开始的原生写法效果一样
 var li8= $('<li><img src="http://pic.axlcg.com/download/20170527_114545342.jpg" alt=""><p>appendTO插入的美女</p></li>')
            li8.appendTo('ul')
//          创建一个li插入到列表中的第一个
 var li9= $('<li><img src="http://pic.axlcg.com/download/20170526_180830781.jpg" alt=""><p>prependto插入的美女</p></li>')
            li9.prependTo('ul')
//            在li9之前再插入一个
 li9.before('<li><img src="http://pic.axlcg.com/download/20170527_110741814.jpg" alt=""><p>before插入的美女（在prependTO之前）</p></li>')
//            在li9之后插入一个
 li9.after('<li><img src="http://pic.axlcg.com/download/20170526_181841235.jpg" alt=""><p>after插入的美女（在prependTO之后）</p></li>')
        })
    </script>
</head>
<body>
<div class="main clearfix">
    <ul class="clearfix">
    <li><img src="http://pic.axlcg.com/download/20170526_180830781.jpg" alt=""><p>美女</p></li>

    </ul>
</div>
</body>
</html>
相关文章
