7.1.8 DOM文档的操作

一、 插入操作

1.父子之间

   1. 1 父元素.appand(子元素)  //插入到子集的最后一个元素

　      子元素.appandTo(父元素)   //appandTo可以链接编程，简化代码

   1.2  父元素.prepend(子元素)    //插入到子集的第一个元素

　      子元素.prependTo(父元素) 

2. 兄弟之间

   2.1  兄弟元素.after(要插入的元素)

 　    要插入的元素.insertAfter(兄弟元素)

    2.2  兄弟元素.before(要插入的元素)

 　    要插入的元素.insertBefore(兄弟元素)

二、替换操作

  页面中获取中的DOM对象.replaceWith(替换的内容)

       如：$('h2').replaceWith('<span>加油吧</span>')

 replaceAll()

       如: $('<p stype="color:red;">黑girl</p>').replaceAll('span');

三、删除

     remove()  删除   //删除节点后 事件也会删除 删除了整个标签

     detach()清空,删除节点后，事件会保留

　　empty()  清空内容

    要删除的对象.remove()  

es6的模板字符串 tab键上面那个反引号

  子元素可以是String,jsDOM对象，jquery对象

 1） $('.box').append('alex')  //可以是普通文件

 2） $('.box').append('<h2>alex</h2>')   //可以标签+文本

3） //插入一个jsDOM对象

     var oP=document.createElement('p');

     oP.innerText='女朋友'

     $('.box').append(oP)  

4）//如果插入的是一个jquery对象 相似于移动操作

<div class="wusir">wusir</div>

 $('.box').append($('.wusir'))