javascript - Apabila memadam DOM menggunakan removechild, anda perlu mendapatkan elemen induk terlebih dahulu, tetapi apabila memasukkan sebelum ini, anda tidak perlu pergi ke elemen induk. dan boleh digunakan terus
学习ing
2017-06-14 10:53:43
![](https://pnpimg.jiaoben.net/upload/image/000/000/000/75064eb6d24033cc300394e09015a6aa-0.jpg)
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id='btn'>创建元素</button>
<script type="text/javascript">
var btn = document.getElementById('btn');
//注册点击事件
btn.onclick = function(){
//创建一个元素
var h1 = document.createElement('h1');
h1.innerHTML = "这是新增h1标签";
console.log( h1 );
//使用appendChild的方式
//document.body.appendChild( h1 );
//使用insertBefore的方式
//是在父元素中,先找一个节点,然后插入到它之前
document.body.insertBefore(h1,btn); //新插入的节点是h1,作为第一个参数
}
</script>
</body>
</html>
![](https://pnpimg.jiaoben.net/upload/image/000/000/000/2093c4ebdce89af633a594143c71deea-1.jpg)
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="box">
<h2>删除操作</h2>
<p>段落1</p>
</p>
<button id='btn'>删除</button>
<script type="text/javascript">
//找父节点p
//var box = document.getElementById('box');
//找子节点h2
var h2 = document.getElementsByTagName('h2')[0];
var btn = document.getElementById('btn');
btn.onclick = function() {
//box.removeChild( h2 );
h2.parentNode.removeChild( h2 );
}
</script>
</body>
</html>
DOM API direka bentuk dengan cara ini.
Unsur indukbody
就是h1
.Walaupun
h1
是一个Element
,但是这个方法都是继承了Node
.Node.insertBefore()
Tatabahasa
Parameter dan nilai pulangan
insertedElement
是被插入的节点,即newElement
parentElement
ialah nod induk bagi nod yang baru dimasukkannewElement
ialah nod yang dimasukkanreferenceElement
在插入newElement
Lihat Node.removeChild lagi
Tatabahasa
Parameter
child
ialah nod anak yang akan dialih keluar.node
ialah nod induk kanak-kanak.oldChild
保存对删除的子节点的引用.oldChild === child
.badan juga merupakan unsur.