原生js和jquery常用的DOM操作

前言

将原生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");