將原生JS和jquery裡面的DOM操作進行了一下整理

標籤：tle   remove   for   font   parent   style   targe   dom操作   tno   

建立元素節點

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操作進行了一下整理