將原生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
刪除節點
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操作進行了一下整理