一、建立元素節點
1.1 原生js建立元素節點
1
document.createelement("p");
1.2 jquery建立元素節點
1
$('
');`
二、建立並新增文字節點
2.1 原生js建立文字節點
1
`document.createtextnode("text content");
通常建立文字節點和建立元素節點配合使用，比如：
1
2
3
vartextel = document.createtextnode("hello world.");
varpel = document.createelement("p");
2.2 jquery建立並新增文字節點：
1
var$p = $('hello world.
');
三、複製節點
3.1 原生js複製節點:
1
varnewel = pel.clonenode(true); `
true和false的區別：
3.2 jquery複製節點
1
$newel = $('#pel').clone(true);
注意：轉殖節點要避免`id重複
四、 插入節點
4.1 原生js向子節點列表的末尾新增新的子節點
1
原生js在節點的已有子節點之前插入乙個新的子節點：
1
el.insertbefore(newnode, targetnode);
4.2 在jquery中，插入節點的方法比原生js多的多
在匹配元素子節點列表結尾新增內容
1
$('#el''hello world.
');
把匹配元素新增到目標元素子節點列表結尾
1
$('hello world.
''#el');
在匹配元素子節點列表開頭新增內容
1
$('#el').prepend('hello world.
');
把匹配元素新增到目標元素子節點列表開頭
1
$('hello world.
').prependto('#el');
在匹配元素之前新增目標內容
1
$('#el').before('hello world.
');
把匹配元素新增到目標元素之前
1
$('hello world.
').insertbefore('#el');
在匹配元素之後新增目標內容
1
$('#el').after('hello world.
');
把匹配元素新增到目標元素之後
1
$('hello world.
').insertafter('#el');
五、刪除節點
5.1 原生js刪除節點
1
el.parentnode.removechild(el);
5.2 jquery刪除節點
1
$('#el').remove();
六、替換節點
6.1 原生js替換節點
1
el.repalcechild(newnode, oldnode);
注意：oldnode必須是parentel真實存在的乙個子節點
6.2 jquery替換節點
1
$('p').replacewith('hello world.
');
七、設定屬性/獲取屬性
7.1 原生js設定屬性/獲取屬性
1
2
3
4
imgel.setattribute("title","logo");
imgel.getattribute("title");
checkboxel.checked =true;
checkboxel.checked;
7.2 jquery設定屬性/獲取屬性:
1
2
3
4
$("#logo").attr();
$("#logo").attr("title");
$("#checkbox").prop();
$("#checkbox").prop("checked");
原生JS與jQuery操作DOM對比
1.1 原生js建立元素節點 1 document.createelement p 1.2jquery建立元素節點 1 2.1 原生js建立文字節點 1 document.createtextnode text content 1 2 3 var textel document.createtext...
原生JS與jQuery操作DOM對比
1.1 原生js建立元素節點 document.createelement p 1.2jquery建立元素節點 2.1 原生js建立文字節點 document.createtextnode text content 通常建立文字節點和建立元素節點配合使用，比如 var textel document...
原生JS與jQuery操作DOM對比
1.1 原生js建立元素節點 1document.createelement p 1.2jquery建立元素節點 1 2.1 原生js建立文字節點 1 document.createtextnode text content 12 3var textel document.createtextnod...