如需向HTML DOM 添加新元素,必须创建该元素(元素节点),然后向一个已存在的元素追加该元素。
创建新的<p>元素:
var para = document.createElement("p");
如需向<p>元素添加文本,必须首先创建文本的节点。创建节点:
var node = document.createTextNode("这是一个新的段落。");
然后向<p>元素追加这个文本节点:
para.appendChild(node);
向已有的元素追加这个新的元素。
找到一个已有元素:
var element = document.getElementById("div1");
向已有元素追加新元素:
element.appendChild(para);
<html>
<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");
element.appendChild(para);
</script>
</body>
</html>
删除已有的HTML 元素
这个HTML是含有两个子节点(两个<p>元素)的<div>元素:
<div id = "div1">
<p id = "p1">这是一个段落。</p>
<p id = "p2">这是另一个段落。</p>
</div>
首先找到id = "div1"的元素:
var parent = getElementById("div1");
然后找到id = "p1"的元素:
var child = getElementById("p1");
从父元素中删除子元素:
parent.removeClild(child);
<html>
<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>
有一点切记 要在那里加上documen !!!