在javaScript的運用中,我們經常需要對某個節點進行增加(appendChid/insertBefore),刪除(removeChild),替換(replaceChid)等操作最關鍵的地方,我覺得應該是找準他們的父節點,以及要操作的子節點.這樣就會思路清晰的進行各種花樣的操作.前面已經介紹了刪除操作,接下來主要是關於增加和替換操作的代碼.
以下代碼是添加一個節點的代碼:
<head>
<!-- Created by TopStyle Pro Trial Version - www.bradsoft.com -->
<title></title>
<style type="text/css">
h2{ //對h2元素設置css樣式
color: red;
}
#hh{ //對新添加的元素的進行css樣式設置(對比是否添加成功)
color: blue;
}
</style>
</head>
<body>
<h1 id="p2">說出你的愛吧!</h1>
<p id="p1">我愛你,成都!</p>
<input type="text" id="text1" />
<input type="button" id="btnclick" value="click me"/>
<h2 id="p3">我是h2元素的內容</h2>
<!--以下是JavaScript腳本-->
<script type="text/javascript">
function addele(){
var gettext=document.getElementById("text1").value;
if(gettext!=null){
var newh=document.createElement("h2");//創建一個新元素節點
newh.id="hh";
//給新元素添加一個id屬性
var newtext=document.createTextNode(gettext)// 創建一個新的文本節點
newh.appendChild(newtext);
document.body.appendChild(newh); //在body的最後一個元素後增加一個元素
}
document.getElementById("text1").value="";//點擊按鈕之後,把文本框的內容清空
}
</script>
</body>
</html>
以下腳本是在指定元素後增加一個新元素:如:
function insertbeforeele(){
var gettext=document.getElementById("text1").value;
if(gettext!=null){
var oldh2=document.getElementById("p3");
var newh=document.createElement("h3");
var newtext=document.createTextNode(gettext)
newh.appendChild(newtext);
document.body.insertBefore(newh, oldh2);
}
document.getElementById("text1").value="";
}
document.getElementById("btnclick").onclick=insertbeforeele;
以下腳本是創建一個新元素來替換掉指定的元素.如:
function repaleele(){
var gettext=document.getElementById("text1").value;
if(gettext!=null){
var oldh2=document.getElementById("p3");
var newh=document.createElement("h3");
var newtext=document.createTextNode(gettext)
newh.appendChild(newtext);
document.body.replaceChild(newh,oldh2)
}
}
document.getElementById("btnclick").onclick=repaleele;