089_DOM节点动态创建、添加和删除
1. 創(chuàng)建節(jié)點(diǎn)
1.1. 創(chuàng)建元素
document.createElement(tagName);1.2. 創(chuàng)建文本
document.createTextNode("這是新文本。");2. 添加節(jié)點(diǎn)
2.1. appendChild()方法, 追加新元素作為父的最后一個(gè)子。
parentElement.appendChild(newElement);2.2. insertBefore()方法, 在父元素的子元素前插入一個(gè)元素。
parentElement.insertBefore(newElement, childElement);3. 刪除節(jié)點(diǎn)
3.1. removeChild()方法, 從父元素中刪除一個(gè)節(jié)點(diǎn)。
3.2. 很遺憾, DOM需要同時(shí)了解您需要?jiǎng)h除的元素及其父。
parentElement.removeChild(childElement);3.3. 這是一種常見的解決方法: 找到你想要?jiǎng)h除的子, 并利用其parentNode屬性找到父:
childElement.parentNode.removeChild(childElement);4. 替換節(jié)點(diǎn)
4.1. replaceChild()方法, 從父元素中替換一個(gè)子。
childElement.parentNode.replaceChild(newElement, oldElement);5. 屬性節(jié)點(diǎn)
5.1. 創(chuàng)建屬性
var attr = document.createAttribute(attributename); // 給屬性賦值 attr.value = 'test'5.2. setAttributeNode()方法用于添加新的屬性節(jié)點(diǎn)。如果元素中已經(jīng)存在指定名稱的屬性, 那么該屬性將被新屬性替代。如果新屬性替代了已有的屬性, 則返回被替代的屬性, 否則返回NULL。
element.setAttributeNode(attributenode)5.3. getAttributeNode()方法從當(dāng)前元素中通過名稱獲取屬性節(jié)點(diǎn)。
element.getAttributeNode(attributename)5.4. removeAttributeNode()方法從元素中刪除指定的屬性節(jié)點(diǎn)。該方法從當(dāng)前元素的屬性集合中刪除(并返回一個(gè))Attr節(jié)點(diǎn)。用removeAttribute()方法代替該方法往往會(huì)更簡(jiǎn)單。
element.removeAttributeNode(attributenode)6. 例子
6.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>DOM節(jié)點(diǎn)動(dòng)態(tài)創(chuàng)建、添加和刪除</title></head><body><div id="div1"><p>我是第一個(gè)p節(jié)點(diǎn)</p><p>我是第二個(gè)p節(jié)點(diǎn)</p></div><div id="div2">刪除我</div><div id="div3">替換我</div><script type="text/javascript">var div1 = document.getElementById('div1');var preP = document.createElement('p');// 創(chuàng)建文本var textPreP = document.createTextNode('我是前置p');preP.appendChild(textPreP);// 創(chuàng)建屬性var idAttr = document.createAttribute("id");idAttr.value = 'preP';preP.setAttributeNode(idAttr);div1.insertBefore(preP, div1.firstChild);var div2 = document.getElementById('div2');div2.parentNode.removeChild(div2);var div3 = document.getElementById('div3');var divReplace = document.createElement('div');// 創(chuàng)建文本var replaceText = document.createTextNode('我是被替換的');divReplace.appendChild(replaceText);// 添加屬性divReplace.setAttribute('id', 'divReplace');div3.parentNode.replaceChild(divReplace, div3);document.write(div1.firstChild.removeAttributeNode(idAttr).value + '<br />');document.write(divReplace.getAttributeNode('id').value + '<br />');// 動(dòng)態(tài)在head標(biāo)簽中添加cssvar headStyle = document.getElementsByTagName("head")[0].appendChild(document.createElement("style"));headStyle.type = "text/css";headStyle.textContent = "p { background-color: red; height: 40px; line-height: 40px; } div { background-color: green;}";</script></body> </html>6.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的089_DOM节点动态创建、添加和删除的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 088_DOM导航
- 下一篇： 016_css()方法