jQuery的DOM操作

jQuery的DOM操作

删除节点

remove()、detach()、empty()

1. remove()

   var $li = $("ul li:eq(0)").remove();
   $li.appendTo("ul");

   用remove()删除节点后，所有后代节点同时删除。该方法返回值是一个指向已被删除的节点。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

2. detach()

   与remove()的区别是仍然保留其绑定的数据。

3. empty()

   作用是清空元素内的后代元素。

复制节点

clone()

复制的节点会带 原来的性质 ，但并不具有任何行为。如需要新元素复制功能，在cline()中传递一个参数true。

$("ul li").click(function(){
    $(this).clone(true).appendTo("ul");
})

替换节点

replaceWith()、replaceAll()

将所匹配的元素替换成指定的HTML或者DOM。例如<p>hao</p>换成<b>hao</b>

$("p").replaceWith("<b>hao</b>");

$("<b>hao</b>").replaceAll("p");

如果替换前绑定了事件，替换后需要重新给新元素绑定事件。

设置和获取HTML、文本和值

html()、text()和val()

遍历节点

parent()、parents()和closest()