原生JS和jQuery操作DOM对比总结 - 行业资讯 - 肥雀云

<强> 1.1原生JS创建元素节点

　　　　　　document.createElement (p); 　　　　

<强> 1.2 jQuery创建元素节点

　　　　　　$ (' & lt; p> & lt;/p>);“ 　　　　

<强> 2.1原生JS创建文本节点

　　　　　　的文档。createTextNode(“文本内容”); 　　　　

通常创建文本节点和创建元素节点配合使用,比如:

　　　　　　var textEl=文档。createTextNode (“Hello World”。); 　　var贝利=document.createElement (“p”); 　　pEl.appendChild (textEl); 　　　　

<强> 2.2 jQuery创建并添加文本节点:

　　　　　　var $ p=$ (' & lt; p> Hello World。;/p>”); 　　　　

<强> 3.1原生JS复制节点:

　　　　　　var中心柱=pEl.cloneNode(真正的);' 　　　　

真和假的区别:
　　

<强> 3.2 jQuery复制节点

　　　　　　中心柱=(#图像的基本单位)美元.clone(真正); 　　　　

克隆节点要避免的ID重复
　　

<强> 4.1原生JS向子节点列表的末尾添加新的子节点

　　　　　　El.appendChild (newNode); 　　　　

原生JS在节点的已有子节点之前插入一个新的子节点:

　　　　　　埃尔。方法(newNode targetNode); 　　　　

<强> 4.2在jQuery中,插入节点的方法比原生JS多的多

在匹配元素子节点列表结尾添加内容

　　　　　　$ (' # El ') .append (' & lt; p> Hello World。;/p>”); 　　　　

把匹配元素添加到目标元素子节点列表结尾

　　　　　　$ (' & lt; p> Hello World。;/p>”) .appendTo (# El); 　　　　

在匹配元素子节点列表开头添加内容

　　　　　　$ (' # El ') .prepend (' & lt; p> Hello World。;/p>”); 　　　　

把匹配元素添加到目标元素子节点列表开头

　　　　　　$ (' & lt; p> Hello World。;/p>”) .prependTo (# El); 　　　　

在匹配元素之前添加目标内容

　　　　　　$ (' # El ') .before (' & lt; p> Hello World。;/p>”); 　　　　

把匹配元素添加到目标元素之前

　　　　　　$ (' & lt; p> Hello World。;/p>”) .insertBefore (# El); 　　　　

在匹配元素之后添加目标内容

　　　　　　$ (' # El ')后(' & lt; p> Hello World。;/p>”); 　　　　

把匹配元素添加到目标元素之后

　　　　　　$ (' & lt; p> Hello World。;/p>”) .insertAfter (# El); 　　　　

<强> 5.1原生JS删除节点

　　　　　　El.parentNode.removeChild (El); 　　　　

<强> 5.2 jQuery删除节点

　　　　　　$ (" # El) .remove (); 　　　　

<强> 6.1原生JS替换节点

　　　　　　埃尔。repalceChild (newNode oldNode); 　　　　

oldNode必须是parentEl真实存在的一个子节点
　　

<强> 6.2 jQuery替换节点

　　　　　　$ (“p”) .replaceWith (' & lt; p> Hello World。;/p>”); 　　　　

<强> 7.1原生JS设置属性/获取属性

　　　　　　imgEl。setAttribute(“标题”、“商标”); 　　imgEl.getAttribute(“标题”); 　　checkboxEl。检查=true; 　　checkboxEl.checked; 　　　　

<强> 7.2 jQuery设置属性/获取属性:

　　　　　　$(" #标识”)。attr({“标题”:“标志”}); 　　$(" #标识”).attr(“标题”); 　　$(" #复选框”)。道具({“检查”:真}); 　　$(" #复选框").prop(“检查”); 　　　　

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。