JavaScript添加或刪除HTML元素


1.添加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");//創建新的<p> 元素
var node=document.createTextNode("這是一個新段落。");//創建文本節點,如果不再需要追加其他文本節點,也可以p1.innerHTML = "這是一個新段落。"
; para.appendChild(node);//向 <p> 元素追加這個文本節點 //向已有的元素追加這個新元素 var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>

2.刪除已有的 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</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>

也可以使用 parentNode 屬性來找到想要刪除元素的父元素

var child=document.getElementById("p1"); child.parentNode.removeChild(child);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM