动态删除元素（2）2019-01-13
2019-01-13 本文已影响0人
不2青年
removeChild()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.2元素动态删除(2)</title>
<script>
window.onload = function () {
/* body... */
var oText = document.getElementById('oText');
var oBtn1 = document.getElementById('oBtn1');//追加
var oBtn2 = document.getElementById('oBtn2');//插入
var oUl = document.getElementById('oUl');
/*
document.creatElement(创建元素名称);
父级.appendChild(添加元素);//追加！！！在父级元素的后面追加新的元素
父级.insertBefore(新的元素，被插入的元素) 在被插入元素前面插入一个新的元素
IE7及以下，被插入元素不能为空
标准浏览器下，被插入元素为空时，自动使用appendChild方法插入第一个元素
*/
oBtn1.onclick = function () {
/* body... */
var oLi = document.createElement('li');
var oA = document.createElement('a');
oA.href = 'javascript:;';
oA.innerHTML = '删除';
oLi.innerHTML = oText.value;
oUl.appendChild(oLi);
oLi.appendChild(oA);
oA.onclick = function () {
/* body... */
/*
(被删元素的)父级.removeChild(删除的元素);
*/
oUl.removeChild(oLi);
}
}
oBtn2.onclick = function () {
/* body... */
var oLi = document.createElement('li');
oLi.innerHTML = oText.value;
//兼容IE7及以下(仿标准浏览器)
// if(oUl.children[0]){
// oUl.insertBefore(oLi,oUl.children[0]);
// }else{
// oUl.appendChild(oLi);
// }
oUl.insertBefore(oLi,oUl.children[0]);//插入到第一个元素的前面，也就是从第一个开始添加
}
}
</script>
</head>
<body>
<input type="text" id="oText"/>
<input type="button" id="oBtn1" value="追加"/>
<input type="button" id="oBtn2" value="插入"/>
<ul id="oUl"></ul>
</body>
</html>
