将原生JS和jquery里面的DOM操作进行了一下整理
Posted Ld_99754
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将原生JS和jquery里面的DOM操作进行了一下整理相关的知识，希望对你有一定的参考价值。
创建元素节点
1.原生：
document.createElement("div")
2.jquery:
$("<div></div>")
创建文本节点并加入元素节点中
1.原生:
var text=document.createTextNode("文本内容"); var p=document.createElement("p"); p.appendChild(text);
2.jquery:
var $p=$(‘<p>Hello World.</p>‘);
复制节点
1.原生:
var newP = p.cloneNode(true);
2.jquery:
$newP = $(‘#p‘).clone(true);
插入节点
1.原生
1.parent.appendChild(node); //尾部插入 2.parent.insertBefore(newnode,targetnode); //在targetnode元素之前插入newnode，没有参数的时候默认在父元素的头部插入
2.jquery：
1.$(‘#p‘).append(‘<p>Hello World.</p>‘); //在#p元素的尾部插入 2.$(‘#p‘).prepend(‘<p>Hello World.</p>‘);//在#p元素的头部插入 3.$(‘#p‘).before(‘<p>Hello World.</p>‘); //在后面元素之前插入 4..$(‘#p‘).after(‘<p>Hello World.</p>‘); //在后面元素之后插入
删除节点
1.原生:
parent.removeChild(node); //在parent节点中删除node节点
2.jquery
$(‘#p‘).remove(); //删除该节点
替换节点
1.原生
parent.replaceChild(newNode,oldNode); //在父节点中替换节点
2.jquery
$(‘#p‘).replaceWith(‘<p>Hello World.</p>‘); //使用后面的节点替换前面的节点
获取和设置属性
1.原生：
node.setAttribute("title", "logo"); //设置node的title属性的值为logo node.getAttribute("title"); //获取title属性的值
2.jquery
$("#logo").attr({"title": "logo"}); $("#logo").attr("title");
希望对大家有用！
以上是关于将原生JS和jquery里面的DOM操作进行了一下整理的主要内容，如果未能解决你的问题，请参考以下文章