创建新节点,删除节点,替换节点,特定节点前插入节点,特定节点后插入节点
<html>
<head>
<title></title>
<script language="javascript">
//创建新节点
function createNode(){
//创建元素节点
var objNode=document.createElement("p");
//创建文本节点
var nodeText=document.createTextNode("--选自《全唐诗》(增加节点)");
//将文本添加到objNode的子节点列表最后
objNode.appendChild(nodeText);
//将节点objNode添加到body的子节点列表最后
document.body.appendChild(objNode);
}
//删除节点
function removeNode(){
var objNode=document.getElementsByTagName("p")[0];
//通过的父节点的removeChild方法删除
objNode.parentNode.removeChild(objNode);
}
//替换节点
function replaceNode(){
//标题被删除,所以getElementsByTagName("p")[1]指的是“窗前明月光”这一行
var objOldNode=document.getElementsByTagName("p")[2];
//新建立节点
var objNewNode=document.createElement("p");
var nodeText=document.createTextNode("床前明月光,(替换节点)");
objNewNode.appendChild(nodeText);
//通过的父节点的replaceChild方法替换
objOldNode.parentNode.replaceChild(objNewNode,objOldNode);
}
//在特定节点前插入
function insertBeforNode(){
var objOldNode=document.getElementsByTagName("p")[0];
//新建立节点
var objNewNode=document.createElement("p");
var nodeText=document.createTextNode("标题被删除了(节点前插入)");
objNewNode.appendChild(nodeText);
//通过的父节点的insertBefore方法插入
objOldNode.parentNode.insertBefore(objNewNode,objOldNode);
}
//在特定节点后插入
function insertAfter(newNode,targetNode){
var objParentNode=targetNode.parentNode;
if(objParentNode.lastChild==targetNode)
objParentNode.appendChild(newNode);
else
objParentNode.insertBefore(newNode,targetNode.nextSibling);
}
function insertAfterNode(){
var objOldNode=document.getElementById("myTarget");
var objNewNode=document.createElement("p");
var nodeText=document.createTextNode("------注:此处有错字(节点后插入)");
objNewNode.appendChild(nodeText);
insertAfter(objNewNode,objOldNode);
}
</script>
</head>
<body onload="createNode();removeNode();replaceNode();insertBeforNode();insertAfterNode()">
<p>唐诗欣赏</p>
<p>李白</p>
<p id="myTarget">窗前明月光,</p>
<p>疑是地上霜,</p>
<p>举头望明月,</p>
<p>低头思故乡。</p>
</body>
</html>