HTML DOM元素
1.创建新的HTML元素
向HTML DOM添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加新元素</title>
</head>
<body>
<div id="domediv">
<p id="test1">第一条语句</p>
<p id="test2">第二条语句</p>
</div>
<button type="button" onclick="test()">添加新文本</button>
<script>
function test(){
var a = document.createElement("p"); //创建一个新的元素
var b = document.createTextNode("这是一个新的段落"); //创建一个新的文本
a.appendChild(b); //吧新文本加入新元素中
var element = document.getElementById("domediv"); //创建新元素
element.appendChild(a); //把字p元素放到div元素中
}
</script>
</body>
</html>
2.删除原有的HTML元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加新元素和删除已有元素</title>
</head>
<body>
<div id="demodiv">
<p id="1">段落1</p>
<p id="2">段落2</p>
</div>
<button type="button" onclick="test()">删除已有元素</button>
<script>
function test(){
var a = document.getElementById("demodiv"); //获取父节点
var b = document.getElementById("2"); //获取子节点
a.removeChild(b); //删除父节点中的子节点
}
</script>
</body>
</html>