當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS 动态创建元素、删除元素、替换元素、修改元素

發布時間：2025/3/15 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 动态创建元素、删除元素、替换元素、修改元素的全部內容，希望文章能夠幫你解決所遇到的問題。

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