創(chuàng)建并添加元素節(jié)點(diǎn)和文本節(jié)點(diǎn)
document.createElement("p");
該句代碼會(huì)在DOM中創(chuàng)建一個(gè)<p>
標(biāo)簽墨状,但是該標(biāo)簽不在DOM樹結(jié)構(gòu)中,為使其真正依附于DOM中應(yīng)使用appendChild方法:
parentNode.appendChild(childNode);
同樣的我們應(yīng)為該<p>
標(biāo)簽添加文本元素钥飞,而文本元素也需要進(jìn)行創(chuàng)建:
document.createTextNode("context");
所以當(dāng)我們需要通過JavaScript為頁面上一個(gè)空div元素中添加一段文本時(shí)我們的代碼應(yīng)該是這樣的
在原始的html文件中存在一個(gè)空的div元素:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div class="pt_div"></div>
</body>
<script type="text/javascript" src=".../nodeTest.js"></script>
</html>
在對(duì)應(yīng)的js文件中:
var para = document.createElement("p");
var txt = document.createTextNode("Hello World");
para.appendChild(txt);
var divt = document.getElementsByClassName("pt_div");
divt[0].appendChild(para);
當(dāng)js文件得到加載運(yùn)行后,頁面將顯示Hello World這一串文本。
添加元素的其他方法
1.在已有的元素前面插入一個(gè)新元素 insertBefore()
調(diào)用的語法:
parentElement.insertBefore(newElement,targetElement);
依次表示父元素恢共、新元素、目標(biāo)元素(你想把新元素插入到哪個(gè)元素之前)璧亚。
2.在已有的元素后面插入一個(gè)新元素 并沒有 insertAfter() 這個(gè)方法L志隆!癣蟋!
但是我們可以手?jǐn)]一個(gè)insertAfter()函數(shù)巴赶酢!
function insertAfter(newElement,targerElement) {
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
只是簡(jiǎn)單的想法就可以自己實(shí)現(xiàn)的東西梢薪,但是看起來沒有什么太大的意義蹬铺。
更改元素CSS樣式
查閱相關(guān)資料得出的方法自己在此主要記一種常用方法:
-.element.style.attribute = 'value';
若在css中存在-改為駝峰形式
div_test.style.marginTop = '10px';
后記
因?yàn)槭浅鯇W(xué)所以記到這里產(chǎn)生了困惑,感覺很多時(shí)候這些工作都可以通過css來完成秉撇,所以在可以通過css單獨(dú)就可以實(shí)現(xiàn)效果的時(shí)候是否還需要js來輔助呢甜攀?