## jquery操作DOM 创建节点 ```javascript var e = $(html); $().append(e); -------------------------------------------- var $li = "<li></li>"; $("ul").append($li); -------------------------------------------- var $li = '<li><a href="blog.csdn.net/image_fzx" target="_blank" title="cookie_fzx">cookie_fzx</a></li>'; $("ul").append($li); 由于复杂节点的属性与属性值之间用的是双引号（如target="_blank"）， 因此我们构造HTML字符串的时候，最外面就不应该用双引号而是用单引号了 ``` 插入节点 ```javascript $(A).append(B) // 在A内部-同一行的“末尾”插入B $(A).appendTo(B) // 将A插入B内部的“末尾” var $strong = "<strong>jQuery入门教程</strong>"; $("p").append($strong); $($strong).appendTo("p"); （1）append()和appendTo()； 内部末尾插入 （2）prepend()和prependTo()； 内部前面插入 （3）before()和insertBefore()； 外部之前插入 （4）after()和insertAfter() 外部后面插入 ``` 删除节点 ```javascript $("ul li:eq(3)").remove(); // 选择ul元素下的第4个li元素 $(A).detach() remove()方法不仅元素会被删除，所绑定的事件都会被删除。 detach()方法只有元素被删除，所绑定的事件并不会删除。 $(A).empty() remove()和detach()都是将某个元素删除。 empty()方法清空元素内部的所有节点 $(A).remove(expression)表示删除符合expression条件的A元素 $("#div3").remove(); $("div").remove("#div3"); ``` 复制节点 ```javascript $(A).clone()表示仅仅将A节点复制，但不复制A节点所绑定的事件。默认值为false $(A).clone(true)表示将A节点复制，并且复制A节点所绑定的事件。 随便点击其中一个列表项，该列表项会被复制，并且添加到ul元素内部末尾 $(this).clone().appendTo("ul") ``` 替换节点 ```javascript 该元素所绑定的事件会消失 $(A).replaceWith(B) 用B来替换A。 $(A).replaceAll(B) 用A来替换B $("p").replaceWith('<a href="blog.csdn.net/image_fzx" target="_blank">fzx</a>'); 等价于 $('<a href="blog.csdn.net/image_fzx" target="_blank">fzx</a>').replaceAll("p"); ``` 包裹节点 ```javascript $(A).wrap(B) // 将A元素使用B元素包裹起来。单独的包裹, A内B外 $(A).wrapAll(B) // 将所有匹配的元素用一个元素来包裹，A内B外 $("p").wrap("<div></div>") $("p").wrapAll("<div></div>") $(A).wrapInner(B) // 将A元素“所有内部子元素”使用B元素包裹起来（不包括A本身） A外--B内 ``` 遍历节点 ```javascript $().each(function(index){ …… }) ------------------------------------ <script type="text/javascript"> $(function () { $("#btn").click(function () { var arr = new Array("HTML", "CSS", "JavaScript", "jQuery", "canvas"); $("li").each(function (index) { var txt = arr[index]; $(this).text(txt); }); }); }) </script> ```