🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 1、添加节点 1、append:父节点.append(子节点); 给父节点追加一个子节点 2、appendTo:子节点.appendTo(父节点); 把一个子节点追加到一个父节点中 3、prepend:父节点.prepend(子节点); 在一个父节点里开始的位置添加一个子节点 4、after:兄弟节点.before(兄弟节点); 在元素后,添加一个兄弟 5、before:兄弟节点.before(兄弟节点); 在元素前,添加一个兄弟 ![](https://img.kancloud.cn/66/12/661268515a28f01f9594b986e157f7ba_854x500.png) # 2、修改节点 replaceWith:旧节点.replaceWith(新节点); 用新的节点替换旧的节点(全部替换) 稍微复杂一点的替换:旧节点.replaceWith(function(){ 返回替换后的结果; }) 用函数处理复杂的替换 ![](https://img.kancloud.cn/48/4c/484c9fc512675946bd2f841f89de1f69_794x442.png) # 3、包裹节点 wrap:里面的节点.wrap(包裹的节点); 将每个查找到的节点分别用包裹的节点包裹 ![](https://img.kancloud.cn/77/8e/778e51dfc388b6605f017e9ebc131fc9_795x314.png) wrapAll:里面的节点.wrapAll(包裹的节点); 将查找到的节点用一个包裹的节点包裹,如果查找的节点不在一起,则强制放到一起,统一包裹。 ![](https://img.kancloud.cn/a4/c6/a4c62a3a4d510882cde37ee23e9deebc_846x358.png) # 4、删除节点 remove():待删除的节点.remove(); 将选择的节点删除 empty():待清空的节点.empty(); 将选择的节点里面的内容清空 ![](https://img.kancloud.cn/ee/8f/ee8fef911797fa2e0e07a7aa57deadd0_686x324.png) # 5、克隆节点 clone():选择的节点.clone(); 将选择的节点(包括里面的内容)克隆 clone(true):选择的节点.clone(true); 将选择的节点克隆,并克隆该节点的事件。 ![](https://img.kancloud.cn/bd/88/bd88b736dc6b70cc666afc8c0740b97d_1018x377.png) # 6、属性操作 attr():标准的设置和获取属性方法,类似 “对象.getAttribute()”或“对象.setAttribute()” 对应的移除方法:removeAttr(); prop():获取/设置不存在的属性比较占优,类似 “对象.属性”或“对象.属性=值” 对应的移除方法:removeProp(); 获取属性: ![](https://img.kancloud.cn/c2/1b/c21b67cef31db7add8943485403bf502_889x342.png) 设置属性: ![](https://img.kancloud.cn/01/9f/019f212e4f51309e2ecdc5fd70d9f012_898x597.png) # 7、全选反选取消 HTML代码: ![](https://img.kancloud.cn/e7/51/e7517e49250043d1764cb8708b4d6500_283x314.png) JS代码: ![](https://img.kancloud.cn/66/64/66645cc8d7671686ca33169fad56b09d_874x566.png)