DOM操作-节点操作

创建节点

   var $li_1 = $("<li>这是创建的第一个节点</li>");

   var $li_2 = $("<li>这是创建的第二个节点</li>");

   $('ul').append($li_1).append($li_2);

创建属性节点

   var $li_1 = $("<li title='香蕉'>香蕉</li>");

   var $li_2 = $("<li title='雪梨'>雪梨</li>");

   $('ul').append($li_1).append($li_2);

插入节点

方法	位置	示例
append()	添加到匹配内容后面（内部）	内部添加$("ul").append("<li></li>");
appendTo()	添加到	内部添加$("<li></li>").append("ul");
prepend()	添加到匹配内容前面（内部）
prependTo()	添加到
after()	添加到匹配内容后面（外部）
insertAfter()	添加到
before()	添加到匹配内容前面（外部）
insertBefore()	添加到匹配内容前面（外部）

删除节点

remove()

该节点包含的所有后代节点都会被删除 返回被已删除的节点

  var $li_1 = $('li:eq(0)').remove();

    $($li_1).appendTo($('ul'));  //被返回的节点可用appenTo()方法再插入

//appenTo()可以用来移动元素，以上两部可以用appenTo() 先删除再添加
 $('li:eq(0)').appendTo($('ul'));

可以通过传递参数来删除制定节点

$("ul li").remove("li[ title!=菠萝 ]")

detach()

与remove()不同的是所有的jq对象和事件都会被保留 重新添加时候事件还在

empty()

清空节点 清空元素中的所有后代节点和内容

克隆节点

clone(true)

参数true表示克隆节点的时候可以同时复制该元素绑定的事件

替换节点

replaceWith() replaceAll()

$('li:eq(0)').replaceWith('<li>苹果</li>');//用苹果替换原来的香蕉
$('<li>苹果</li>').replaceAll('li:eq(0)');//用苹果替换原来的香蕉

包裹节点

方法	位置	示例
wrap()	$("strong").wrap('<b></b>')	用<b>包裹<strong> 每个单独包裹;
wrapAll()	$("strong").wrapAll('<b></b>')	用一个<b>包裹所有<strong> 如果中间有间隔元素 间隔元素会被放到包裹元素之后;
wrapInner()	$("strong").wrapInner('<b></b>')	用<b>包裹<strong>内部的内容 每个单独包裹;