一、創建元素節點
1.1 原生JS創建元素節點
document.createElement("p");1.2 jQuery創建元素節點
$('<p></p>');`二、創建并添加文本節點
2.1 原生JS創建文本節點
`document.createTextNode("Text Content");通常創建文本節點和創建元素節點配合使用，比如：
var textEl = document.createTextNode("Hello World.");var pEl = document.createElement("p");pEl.appendChild(textEl);2.2 jQuery創建并添加文本節點：
var $p = $('<p>Hello World.</p>');三、復制節點
3.1 原生JS復制節點:
var newEl = pEl.cloneNode(true); `
true和false的區別：
3.2 jQuery復制節點
$newEl = $('#pEl').clone(true);注意：克隆節點要避免`ID重復
四、 插入節點
4.1 原生JS向子節點列表的末尾添加新的子節點
El.appendChild(newNode);
原生JS在節點的已有子節點之前插入一個新的子節點：
El.insertBefore(newNode, targetNode);
4.2 在jQuery中，插入節點的方法比原生JS多的多
在匹配元素子節點列表結尾添加內容
$('#El').append('<p>Hello World.</p>');把匹配元素添加到目標元素子節點列表結尾
$('<p>Hello World.</p>').appendTo('#El');在匹配元素子節點列表開頭添加內容
$('#El').prepend('<p>Hello World.</p>');把匹配元素添加到目標元素子節點列表開頭
$('<p>Hello World.</p>').prependTo('#El');在匹配元素之前添加目標內容
$('#El').before('<p>Hello World.</p>');把匹配元素添加到目標元素之前
$('<p>Hello World.</p>').insertBefore('#El');在匹配元素之后添加目標內容
$('#El').after('<p>Hello World.</p>');把匹配元素添加到目標元素之后
$('<p>Hello World.</p>').insertAfter('#El');五、刪除節點
5.1 原生JS刪除節點
El.parentNode.removeChild(El);
5.2 jQuery刪除節點
$('#El').remove();六、替換節點
6.1 原生JS替換節點
El.repalceChild(newNode, oldNode);
注意：oldNode必須是parentEl真實存在的一個子節點
6.2 jQuery替換節點
$('p').replaceWith('<p>Hello World.</p>');七、設置屬性/獲取屬性
7.1 原生JS設置屬性/獲取屬性
imgEl.setAttribute("title", "logo");imgEl.getAttribute("title");checkboxEl.checked = true;checkboxEl.checked;7.2 jQuery設置屬性/獲取屬性:
$("#logo").attr({"title": "logo"});$("#logo").attr("title");$("#checkbox").prop({"checked": true});$("#checkbox").prop("checked");總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
