插入節點:
1). insertBefore(): 把一個給定節點插入到一個給定元素節點的給定子節點的前面
var reference = element.insertBefore(newNode,targetNode);
節點 newNode 將被插入到元素節點 element 中並出現在節點 targetNode 的前面. 節點 targetNode 必須是 element 元素的一個子節點。
2). 自定義 insertAfter() 方法
/**
* 將 newChild 插入到 refChild 的後邊
* @param {Object} newChild
* @param {Object} refChild
*/
function insertAfter(newChild, refChild){
var refParentNode = refChild.parentNode;
//判斷 refChild 是否存在父節點
if(refParentNode){
//判斷 refChild 節點是否為其父節點的最後一個子節點
if(refChild == refParentNode.lastChild){
refParentNode.appendChild(newChild);
}else{
refParentNode.insertBefore(newChild, refChild.nextSibling);
}
}
}
代碼:
Java代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
//1. 新建一個 "<li>倫敦</li>", 並將該節點添加到 #dj 的前邊
var ld = document.createElement("li");
ld.appendChild(document.createTextNode("倫敦"));
document.getElementById("city").insertBefore(ld, document.getElementById("dj"));
//2. 新建一個 "<li>紐約</li>", 並將該節點添加到 #dj 的後邊
var ny = document.createElement("li");
ny.appendChild(document.createTextNode("紐約"));
insertAfter(ny, document.getElementById("dj"));
//3. 新建一個 "<li>芝加哥</li>", 並將該節點添加到 "首爾" 節點的後邊
var zjg = document.createElement("li");
zjg.appendChild(document.createTextNode("芝加哥"));
insertAfter(zjg, document.getElementById("city").lastChild);
};
/**
* 把 newChild 放到 targetChild 節點的後邊
* @param {Object} newChild
* @param {Object} targetChild
*/
function insertAfter(newChild, targetChild){
//1. 獲取 targetChild 的父節點
var parentNode = targetChild.parentNode;
//2. 判斷 targetChild 節點是否為其父節點的最後一個子節點
if(parentNode){
//3. 若是最後一個子節點: 則直接把 newChild 加為 targetChild 父節點的子節點即可
if(parentNode.lastChild == targetChild){
parentNode.appendChild(newChild);
}
//4. 若不是最後一個子節點: 則先獲取 targetChild 節點的下一個兄弟節點, 然後調用 insertBefore() 方法
else{
parentNode.insertBefore(newChild, targetChild.nextSibling);
}
}
}
</script>
</head>
<body>
<p>你喜歡哪個城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">東京</li>
<li>首爾</li>
</ul>
<br><br>
<p>你喜歡哪款單機遊戲?</p>
<ul id="game">
<li id="rl">紅警</li>
<li>實況</li>
<li>極品飛車</li>
<li>魔獸</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>
刪除節點:
1). removeChild(): 從一個給定元素裡刪除一個子節點
var reference = element.removeChild(node);
返回值是一個指向已被刪除的子節點的引用指針. 某個節點被 removeChild() 方法刪除時, 這個節點所包含的所有子節點將同時被刪除.
如果想刪除某個節點, 但不知道它的父節點是哪一個, parentNode 屬性可以幫忙。
Html代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
//1. 為每一個 li 節點添加一個 click 響應函數, 從文檔中刪除自己
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
this.parentNode.removeChild(this);
};
}
};
</script>
</head>
<body>
<p>你喜歡哪個城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">東京</li>
<li>首爾</li>
</ul>
<br><br>
<p>你喜歡哪款單機遊戲?</p>
<ul id="game">
<li id="rl">紅警</li>
<li>實況</li>
<li>極品飛車</li>
<li>魔獸</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>
innerHTML屬性:
1). 瀏覽器幾乎都支持該屬性, 但不是 DOM 標準的組成部分. innerHTML 屬性可以用來讀, 寫某給定元素裡的 HTML 內容
Html代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
//1. 獲取 city 節點中的內容
var cityNode = document.getElementById("city");
alert(cityNode.innerHTML);
//2. 把 city 節點中內容換為 #game 節點的內容
cityNode.innerHTML = document.getElementById("game").innerHTML;
};
</script>
</head>
<body>
<p>你喜歡哪個城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">東京</li>
<li>首爾</li>
</ul>
<br><br>
<p>你喜歡哪款單機遊戲?</p>
<ul id="game">
<li id="rl">紅警</li>
<li>實況</li>
<li>極品飛車</li>
<li>魔獸</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>
本文出自“change”