appendChild()
用于向 childNodes 列表的末尾添加一個(gè)節(jié)點(diǎn)，添加節(jié)點(diǎn)后，childNodes 新增節(jié)點(diǎn)，父節(jié)點(diǎn)及以前的最后一個(gè)子節(jié)點(diǎn)的關(guān)系指針都會(huì)得到相應(yīng)的更新。更新完成后，appendChild() 返回新增的節(jié)點(diǎn)。
- 小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul id = "list"> <li>Coffee</li><li>Tea</li></ul>
<button onclick = "test()">點(diǎn)擊</button>
</body>
<script>
function test(){
//創(chuàng)建 li 節(jié)點(diǎn)
var node = document.createElement("li");
//創(chuàng)建文本節(jié)點(diǎn)
var textnode = document.createTextNode("Water");
//文本節(jié)點(diǎn)追加到 li 節(jié)點(diǎn)
node.appendChild(textnode);
// li 節(jié)點(diǎn)添加到列表中
document.getElementById("list").appendChild(node);
}
</script>
</html>
- 效果展示
點(diǎn)擊按鈕之前
點(diǎn)擊按鈕之后
insertBefore()
如果需要把節(jié)點(diǎn)放在 childNodes 列表中某個(gè)特定的位置上，而不是放在末尾上，那么可以使用 insertBefore() 方法。這個(gè)方法接受兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)。插入節(jié)點(diǎn)后會(huì)變成參照節(jié)點(diǎn)的前一個(gè)同胞節(jié)點(diǎn)(previouslibing),同時(shí)被方法返回。如果參照節(jié)點(diǎn)是 null ,則 insertBefore() 與 appendChild() 執(zhí)行相同的操作。
- 小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<button onclick="myFunction()">試一下</button>
<script>
function myFunction()
{
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>
</body>
</html>
效果展示
點(diǎn)擊按鈕之前
點(diǎn)擊按鈕之后
replaceChild
- replaceChild() 方法接受兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)。要替換的節(jié)點(diǎn)將由這個(gè)方法返回并從文檔樹(shù)中被移除，同時(shí)由要插入的節(jié)點(diǎn)占據(jù)它的位置。
- 在使用 replaceChild() 插入節(jié)點(diǎn)的時(shí)候，該節(jié)點(diǎn)的所有關(guān)系指針都會(huì)從被它替換的節(jié)點(diǎn)復(fù)制過(guò)來(lái)。從技術(shù)上講，被替換的節(jié)點(diǎn)仍然存在于文檔中，但是文檔中已經(jīng)沒(méi)有了自己的位置。
- 小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul id = "list"><li>a</li><li>b</li><li>c</li>
</ul>
<button onclick = "test()">點(diǎn)擊</button>
</body>
<script>
function test(){
var newText = document.createTextNode("e");
var item = document.getElementById("list").childNodes[1];
item.replaceChild(newText,item.childNodes[0]);
}
</script>
</html>
- 效果展示
點(diǎn)擊按鈕之前
點(diǎn)擊按鈕之后
removeChild()
這個(gè)方法接受一個(gè)參數(shù)，即要移除的節(jié)點(diǎn)，被移除的節(jié)點(diǎn)將會(huì)成為方法的返回值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul id="myList"><li>a</li><li>b</li> <li>c</li></ul>
<button onclick = "test()">點(diǎn)擊</button>
<script>
function test(){
var list=document.getElementById("myList");
list.removeChild(list.childNodes[1]);
}
</script>
</body>
</html>
- 效果展示
點(diǎn)擊按鈕之前
點(diǎn)擊按鈕之后
