javaScript 基础 HTML DOM 三 节点
javascript 可以在HTML DOM 中添加新元素.
1、在添加新元素之前,我们需要先创建一个新节点,然后在创建后的新节点中添加元素。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="div1">
<p id="p1Name">喵~</p>
<p id="p2Name">嗷呜~</p>
<script>
//创建一个值为p的元素(节点)。
var newElement= document.createElement("p");
//创捷一个文本节点
var newPara=document.createTextNode("新文本节点");
//将文本节点添加到p元素中
newElement.appendChild(newPara);
//获取div元素
var fatherEle=document.getElementById("div1");
/*将p元素添加到元素div1中。只有将新建的元素添加到已有的元素中才可以被显示。*/
fatherEle.appendChild("newElement");
</script>
</div>
</div>
</body>
</html>
2、删除已有的元素
1)、我们想要删除已有的元素时,必须找到其父元素。这样DOM才能判断想要删除的元素的位置。
以上一段代码为例子
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.remove(child);
/*当不想获取父节点时,可以下列代码删除子节点。但是一个子节点有多个父节点,DOM只执行所搜索到的第一个父节点里的子节点进行处理*/
var child=document.getElementById("p1");
child.parentNode.removeChild(child);