原生js与jQuery操作DOM的区别
2021-06-28 06:08
标签：链接 dex new target 子节点 创建 文章 order strong 转自网络 一、创建元素节点 1.1 原生JS创建元素节点 1.2 jQuery创建元素节点 二、创建并添加文本节点 2.1 原生JS创建文本节点 通常创建文本节点和创建元素节点配合使用，比如： 2.2 jQuery创建并添加文本节点： Hello World. 三、复制节点 3.1 原生JS复制节点: true和false的区别： Hello World. 3.2 jQuery复制节点 注意：克隆节点要避免`ID重复 四、 插入节点 4.1 原生JS向子节点列表的末尾添加新的子节点 原生JS在节点的已有子节点之前插入一个新的子节点： 4.2 在jQuery中，插入节点的方法比原生JS多的多 在匹配元素子节点列表结尾添加内容 Hello World. 把匹配元素添加到目标元素子节点列表结尾 Hello World. 在匹配元素子节点列表开头添加内容 Hello World. 把匹配元素添加到目标元素子节点列表开头 Hello World. 在匹配元素之前添加目标内容 Hello World. 把匹配元素添加到目标元素之前 Hello World. 在匹配元素之后添加目标内容 Hello World. 把匹配元素添加到目标元素之后 Hello World. 五、删除节点 5.1 原生JS删除节点 5.2 jQuery删除节点 六、替换节点 6.1 原生JS替换节点 注意：oldNode必须是parentEl真实存在的一个子节点 6.2 jQuery替换节点 Hello World. 七、设置属性/获取属性 7.1 原生JS设置属性/获取属性 7.2 jQuery设置属性/获取属性: 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。 原文链接：http://blog.poetries.top/2017/01/14/js-and-jquery-dom-compare/ 原生js与jQuery操作DOM的区别 标签：链接 dex new target 子节点 创建 文章 order strong 原文地址：http://www.cnblogs.com/web521/p/7143744.html
document.createElement("p");
$(‘‘);`
`document.createTextNode("Text Content");
var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);
var $p = $(‘);
var newEl = pEl.cloneNode(true); `
$newEl = $(‘#pEl‘).clone(true);
El.appendChild(newNode);
El.insertBefore(newNode, targetNode);
$(‘#El‘).append(‘);
$(‘).appendTo(‘#El‘);
$(‘#El‘).prepend(‘);
$(‘).prependTo(‘#El‘);
$(‘#El‘).before(‘);
$(‘).insertBefore(‘#El‘);
$(‘#El‘).after(‘);
$(‘).insertAfter(‘#El‘);
El.parentNode.removeChild(El);
$(‘#El‘).remove();
El.repalceChild(newNode, oldNode);
$(‘p‘).replaceWith(‘);
imgEl.setAttribute("title", "logo");
imgEl.getAttribute("title");
checkboxEl.checked = true;
checkboxEl.checked;
$("#logo").attr({"title": "logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked": true});
$("#checkbox").prop("checked");