JS基础14-对DOM的增改和删除工作
一、DOM对HTML元素的增删改操作
1.DOM添加、删除节点的方法：
|
appendChild(newNode) |
将newNode添加成当前节点的最后一个子节点 |
|
insertBefore(newNode,refNode) |
将refNode节点之前插入newNode节点 |
|
replaceChild(newNode,oldNode) |
将oldNode节点替换成newNode节点 |
|
removeChild(oldNode) |
将oldNode子节点删除 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>对DOM的增改和删除工作</title>
<script type="text/javascript">
function show(){
var l=document.createElement("li");
var u=document.getElementById('u');
l.innerHTML="昆明"
// u.appendChild(l);//添加节点
// u.insertBefore(l,u.lastElementChild);//插入节点
u.replaceChild(l,u.firstElementChild)；//替换节点
}
function copy(){
var f=document.getElementById('u').firstElementChild;
var clone=f.cloneNode(true);//浅复制，只复制当前节点，不复制后代。
var u=document.getElementById('u');
u.appendChild(clone);//将复制的节点加到ul标签上去
}
function del(){
var l=document..getElementById('u');
var d=l.lastChild.previousSibling;//想要删除的节点
l.removeChild(d);
}
</script>
</head>
<body>
<ul id="u">
<li>丽江</li>
<li>大理</li>
</ul><br>
<input type="button" value="创建插入替换节点" onClick="show()">
<input type="button" value="复制节点" onClick="copy()">
<input type="button" value="删除节点" onClick="del()">
</body>
</html>
