當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS 动态创建元素、删除元素、替换元素、修改元素
生活随笔
收集整理的這篇文章主要介紹了
JS 动态创建元素、删除元素、替换元素、修改元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
動態創建元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div><script> var para = document.createElement("p"); var node = document.createTextNode("這是一個新的段落。"); para.appendChild(node);var element = document.getElementById("div1"); var child = document.getElementById("p1"); element.insertBefore(para, child); </script></body> </html>注意
- appendChild()?方法，它用于添加新元素到尾部。
- insertBefore()?方法，它用于添加新元素到開始位置。
?
刪除元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div><script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </script></body> </html>注意
- 已知要查找的子元素，然后查找其父元素，再刪除這個子元素（刪除節點必須知道父節點）：
?
替換元素、修改元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div><script> var para = document.createElement("p"); var node = document.createTextNode("這是一個新的段落。"); para.appendChild(node);var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script></body> </html>?
總結
以上是生活随笔為你收集整理的JS 动态创建元素、删除元素、替换元素、修改元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ActiveMQ集群
- 下一篇： MasterSlave是什么？