Jquery的文档操作

插入操作

1. 父元素.append(子元素) 追加某元素 父元素中添加新的元素

   var oli = document.createElement('li');
   oli.innerHTML = '哈哈哈'
   //jquery中的dom操作
   //1.append(content)追加  往父元素中添加新的元素
   //content:string | element | jquery元素
   $('ul').append('<li>1233</li>')
   $('ul').append(oli)
   //如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。就是一个移动操作
   $('ul').append($('#app'))
   

2. 子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素

   $('<li>天王盖地虎</li>').appendTo($('ul')).addClass('hu')
   
   // 链式编程时，用appendTo得到的时新添加子类的jquery对象
   $('<p>alert</p>').appendTo($('.box')).click(function(){
   	alert(2);
   });
   

3. prepend（） 前置添加， 插入子级的第一个元素

   $('ul').prepend('<li>我是第一个</li>')
   

4. prependTo 后置添加，第一个元素添加到父元素中

   $('<a href="#">我是第一个</a>').prependTo('ul')
   

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

   var title = 'after';    
   $('.item').after(
   	`<li>
   	<a href="#">${title}</a>
   	</li>
   `);    
   

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

   var title1 = 'before';    
   $('.item').before(
   	`<li>
   	<a href="#">${title1}</a>
   	</li>
   `); 
   

   复制操作

   clone() 克隆匹配的DOM元素并且选中这些克隆的副本

   $('button').click(function() {
   
   // 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
   // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(副本具有与真身一样的事件处理能力)
     $(this).clone(true).insertAfter(this);
   });
   

   替换操作

   1. 被替换的对象.replaceWith(要替换的对象)：将所有匹配的元素替换成指定的HTML或DOM元素。

      //将所有的h5标题替换为a标签
      $('h5').replaceWith('<a href="#">hello world</a>');
      //将所有h5标题标签替换成id为app的dom元素
      $('h5').replaceWith($('#app'));
      

   2. replaceAll():用匹配的元素替换掉所有 selector匹配到的元素

      $('<br/><hr/><button>按钮</button>').replaceAll('h4');
      

   删除操作

   1. remove() 删除节点后，事件也会删除（简言之，删除了整个标签）

      $('ul').remove();
      

   2. detach() 删除节点后，事件会保留

       var $btn = $('button').detach();
       //此时按钮能追加到ul中
       $('ul').append($btn);
      

   3. empty(): 清空元素中的所有后代节点

      //清空掉ul中的子元素，保留ul
      $('ul').empty()