您好,登錄后才能下訂單哦!
一、創(chuàng)建元素節(jié)點(diǎn)
1.1 原生JS創(chuàng)建元素節(jié)點(diǎn)
document.createElement("p");
1.2 jQuery創(chuàng)建元素節(jié)點(diǎn)
$('<p></p>');`
二、創(chuàng)建并添加文本節(jié)點(diǎn)
2.1 原生JS創(chuàng)建文本節(jié)點(diǎn)
`document.createTextNode("Text Content");
通常創(chuàng)建文本節(jié)點(diǎn)和創(chuàng)建元素節(jié)點(diǎn)配合使用,比如:
var textEl = document.createTextNode("Hello World."); var pEl = document.createElement("p"); pEl.appendChild(textEl);
2.2 jQuery創(chuàng)建并添加文本節(jié)點(diǎn):
var $p = $('<p>Hello World.</p>');
三、復(fù)制節(jié)點(diǎn)
3.1 原生JS復(fù)制節(jié)點(diǎn):
var newEl = pEl.cloneNode(true); `
true和false的區(qū)別:
3.2 jQuery復(fù)制節(jié)點(diǎn)
$newEl = $('#pEl').clone(true);
注意:克隆節(jié)點(diǎn)要避免`ID重復(fù)
四、 插入節(jié)點(diǎn)
4.1 原生JS向子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)
El.appendChild(newNode);
原生JS在節(jié)點(diǎn)的已有子節(jié)點(diǎn)之前插入一個(gè)新的子節(jié)點(diǎn):
El.insertBefore(newNode, targetNode);
4.2 在jQuery中,插入節(jié)點(diǎn)的方法比原生JS多的多
在匹配元素子節(jié)點(diǎn)列表結(jié)尾添加內(nèi)容
$('#El').append('<p>Hello World.</p>');
把匹配元素添加到目標(biāo)元素子節(jié)點(diǎn)列表結(jié)尾
$('<p>Hello World.</p>').appendTo('#El');
在匹配元素子節(jié)點(diǎn)列表開(kāi)頭添加內(nèi)容
$('#El').prepend('<p>Hello World.</p>');
把匹配元素添加到目標(biāo)元素子節(jié)點(diǎn)列表開(kāi)頭
$('<p>Hello World.</p>').prependTo('#El');
在匹配元素之前添加目標(biāo)內(nèi)容
$('#El').before('<p>Hello World.</p>');
把匹配元素添加到目標(biāo)元素之前
$('<p>Hello World.</p>').insertBefore('#El');
在匹配元素之后添加目標(biāo)內(nèi)容
$('#El').after('<p>Hello World.</p>');
把匹配元素添加到目標(biāo)元素之后
$('<p>Hello World.</p>').insertAfter('#El');
五、刪除節(jié)點(diǎn)
5.1 原生JS刪除節(jié)點(diǎn)
El.parentNode.removeChild(El);
5.2 jQuery刪除節(jié)點(diǎn)
$('#El').remove();
六、替換節(jié)點(diǎn)
6.1 原生JS替換節(jié)點(diǎn)
El.repalceChild(newNode, oldNode);
注意:oldNode必須是parentEl真實(shí)存在的一個(gè)子節(jié)點(diǎn)
6.2 jQuery替換節(jié)點(diǎn)
$('p').replaceWith('<p>Hello World.</p>');
七、設(shè)置屬性/獲取屬性
7.1 原生JS設(shè)置屬性/獲取屬性
imgEl.setAttribute("title", "logo"); imgEl.getAttribute("title"); checkboxEl.checked = true; checkboxEl.checked;
7.2 jQuery設(shè)置屬性/獲取屬性:
$("#logo").attr({"title": "logo"}); $("#logo").attr("title"); $("#checkbox").prop({"checked": true}); $("#checkbox").prop("checked");
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。