JQuery-节点操作

节点相关操作

添加节点

• 内部添加

  // 在指定元素内部底部添加
  $('.parent').append($son);
  $son.appednTo('.parent'));
  
  // 在指定元素内部顶添加
  $('.parent').prepend($son);
  $son.prependTo('.parent'));
  

• 外部添加

  // 在指定元素外部的前面添加元素
  $('.parent').after($son);
  $son.insertAfter('.parent'));
  
  // 在指定元素外部的后面添加元素
  $('.parent').before($son);
  $son..insertBefore('.parent'));
  

删除节点

// 删除指定节点
$('div').remove();
// 删除指定节点中含有 .active 类的节点
$('div').remove('.active');

// 删除指定节点的内容与子元素
$('div').empty();

// 删除指定节点
$('div').detach();
$('div').detach('.active');

remove与detach的区别：**

remove不仅会清除指定节点，节点上绑定的事件、数据也会一并清除；

detach只会清除节点，绑定的事件以及数据不会被清除。

替换节点

<h1>h1</h1>
<h1>h1</h1>

let $h6 = $('<h6>h6</h6>');
$('h1').replaceWith($h6);

$h6.replaceAll('h1');

克隆节点

// 浅复制，只会复制内容，不会复制事件
let $newDiv = $('div').clone(false);

// 深复制，即会复制内容，也会复制事件
leT $newDiv = $('div').clone(true);