當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

089_DOM节点动态创建、添加和删除

發布時間：2025/4/17 编程问答 55 豆豆

生活随笔收集整理的這篇文章主要介紹了 089_DOM节点动态创建、添加和删除小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 創建節點

1.1. 創建元素

document.createElement(tagName);

1.2. 創建文本

document.createTextNode("這是新文本。");

2. 添加節點

2.1. appendChild()方法, 追加新元素作為父的最后一個子。

parentElement.appendChild(newElement);

2.2. insertBefore()方法, 在父元素的子元素前插入一個元素。

parentElement.insertBefore(newElement, childElement);

3. 刪除節點

3.1. removeChild()方法, 從父元素中刪除一個節點。

3.2. 很遺憾, DOM需要同時了解您需要刪除的元素及其父。

parentElement.removeChild(childElement);

3.3. 這是一種常見的解決方法: 找到你想要刪除的子, 并利用其parentNode屬性找到父:

childElement.parentNode.removeChild(childElement);

4. 替換節點

4.1. replaceChild()方法, 從父元素中替換一個子。

childElement.parentNode.replaceChild(newElement, oldElement);

5. 屬性節點

5.1. 創建屬性

var attr = document.createAttribute(attributename); // 給屬性賦值 attr.value = 'test'

5.2. setAttributeNode()方法用于添加新的屬性節點。如果元素中已經存在指定名稱的屬性, 那么該屬性將被新屬性替代。如果新屬性替代了已有的屬性, 則返回被替代的屬性, 否則返回NULL。

element.setAttributeNode(attributenode)

5.3. getAttributeNode()方法從當前元素中通過名稱獲取屬性節點。

element.getAttributeNode(attributename)

5.4. removeAttributeNode()方法從元素中刪除指定的屬性節點。該方法從當前元素的屬性集合中刪除(并返回一個)Attr節點。用removeAttribute()方法代替該方法往往會更簡單。

element.removeAttributeNode(attributenode)

6. 例子

6.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>DOM節點動態創建、添加和刪除</title></head><body><div id="div1"><p>我是第一個p節點</p><p>我是第二個p節點</p></div><div id="div2">刪除我</div><div id="div3">替換我</div><script type="text/javascript">var div1 = document.getElementById('div1');var preP = document.createElement('p');// 創建文本var textPreP = document.createTextNode('我是前置p');preP.appendChild(textPreP);// 創建屬性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');// 創建文本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 />');// 動態在head標簽中添加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. 效果圖

總結

以上是生活随笔為你收集整理的089_DOM节点动态创建、添加和删除的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 088_DOM导航
下一篇： 090_HTMLCollection和N