【jQuery】节点操作

追加到指定元素外部

after()

: 追加到指定元素外部的后面

$(\'button\').eq(2).click(function () {$(\'ul\').after($li);// $li.insertAfter(\'ul\');})

insertAfter

: 只是语法不同, 效果一样

• before(): 追加到指定元素外部的前面

  $(\'button\').eq(3).click(function () {$(\'ul\').before($li);// 只是语法不同// $li.insertBefore(\'ul\');})

  insertBefore

  : 只是语法不同, 效果一样

二. 删除节点

• remove()

  : 删除指定元素

  $(\'button\').eq(0).click(function(){$(\'div\').remove();})

  可以指定要删除的元素名如：

  $(\'button\').eq(0).click(function(){$(\'li\').remove(\'.item\');})

  删除li里类名叫item的

• empty()

  : 删除指定元素的内容和子元素，自身不会删除

  $(\'button\').eq(1).click(function () {$(\'div\').empty();})

• detach()

  : 效果同remove

  $(\'button\').eq(2).click(function () {$(\'li\').detach(\'.item\');})

三. 替换节点

• replaceWith()

  : 替换所有匹配到的元素为指定元素

  $(\'button\').click(function(){// 新建节点var $h2 = $(\'<h2>标题2</h2>\');// replaceWith(): 替换所有匹配到的元素为指定元素$(\'h5\').replaceWith($h2);})

  replaceAll(): 仅语法不同

  $(\'button\').click(function(){// 新建节点var $h5 = $(\'<h5>标题5</h5>\');// replaceAll(): 仅语法不同$h5.replaceAll(\'p\');})

四. 复制节点

• clone

  方法：传入false是浅复制，传入true是深复制

  浅复制，只复制元素，不会复制元素的事件

  $(\'button\').eq(0).click(function(){// 浅复制li的第一个var $li = $(\'li:first\').clone(false);// 添加到ul中$(\'ul\').append($li);})

• 深复制，不仅复制元素，还会复制元素的事件

  $(\'button\').eq(1).click(function () {// 深复制li的第一个var $li = $(\'li:first\').clone(true);// 添加到ul中$(\'ul\').append($li);})// 给li添加点击事件$(\'li\').click(function(){alert($(this).html())})