jQuery 文本插入和标签移动方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
    <div id="div1">hello div1</div>
    <p id="p1">hello p1</p>
        <div>hello div2
            <p id="p2">hello p2</p>
        </div>
 <script>
     var ele=$("#p2");
     //$("#div1").append(ele);       //把p2插入到div1的子代最后
     //$("#p1").appendTo(ele);       //把p1插入到p2子代最后

     //("#p1").prepend(ele);         // 把p2插入到p1子代里的第一个后位置
     //$(ele).prependTo($("#p1"));   //把p2插入到P1子代里的第一个位置

     //$("#p1").after(ele);            //把p2加入到p1后面的同级兄弟标签中去
     //$(ele).insertAfter("#p1");            //把p2加入到p1后面的同级兄弟标签中去

      //$("#div1").before(ele);            //把p2加入到div1前面的同级兄弟标签中去
      //$(ele).insertBefore("#div1");            //把p2加入到div1前面的同级兄弟标签中去


 </script>
</body>
</html>
注:以上4对方法是实现标签兄弟父子关系之间的位置移动,或者在在参数那直接加入文本 成为添加文本的方式. 
每队的方法效果相同,只是一个是表达式在前,一个是参数在前.实现4中方法

 

posted @ 2017-12-15 14:24  归来仍是少年!  阅读(2006)  评论(0编辑  收藏  举报