DOM——操作节点
2017-08-11 本文已影响0人
lx_smile
appendChild()
用于向 childNodes 列表的末尾添加一个节点，添加节点后，childNodes 新增节点，父节点及以前的最后一个子节点的关系指针都会得到相应的更新。更新完成后，appendChild() 返回新增的节点。
- 小例子
<!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()">点击</button>
</body>
<script>
function test(){
//创建 li 节点
var node = document.createElement("li");
//创建文本节点
var textnode = document.createTextNode("Water");
//文本节点追加到 li 节点
node.appendChild(textnode);
// li 节点添加到列表中
document.getElementById("list").appendChild(node);
}
</script>
</html>
- 效果展示
点击按钮之前
点击按钮之后
insertBefore()
如果需要把节点放在 childNodes 列表中某个特定的位置上，而不是放在末尾上，那么可以使用 insertBefore() 方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后会变成参照节点的前一个同胞节点(previouslibing),同时被方法返回。如果参照节点是 null ,则 insertBefore() 与 appendChild() 执行相同的操作。
- 小例子
<!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>
效果展示
点击按钮之前
点击按钮之后
replaceChild
- replaceChild() 方法接受两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据它的位置。
- 在使用 replaceChild() 插入节点的时候，该节点的所有关系指针都会从被它替换的节点复制过来。从技术上讲，被替换的节点仍然存在于文档中，但是文档中已经没有了自己的位置。
- 小例子
<!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()">点击</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>
- 效果展示
点击按钮之前
点击按钮之后
removeChild()
这个方法接受一个参数，即要移除的节点，被移除的节点将会成为方法的返回值。
<!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()">点击</button>
<script>
function test(){
var list=document.getElementById("myList");
list.removeChild(list.childNodes[1]);
}
</script>
</body>
</html>
- 效果展示
点击按钮之前
点击按钮之后
