DOM(创建插入和删除元素)
Posted 懂你在爱我
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM(创建插入和删除元素)相关的知识，希望对你有一定的参考价值。
1.创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
例子：为ul插入li 并且为li元素插入一些文字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var oBtn = document.getElementById(\'btn\'); var oUl = document.getElementById(\'ul1\'); var oText = document.getElementById(\'text1\'); oBtn.onclick = function () { var oLi = document.createElement(\'li\'); oLi.innerHTML = oText.value; oUl.appendChild(oLi); } }; </script> </head> <body> <input id=\'text1\' type="text"> <input id="btn" type="button" value="创建li"> <ul id="ul1"> </ul> </body> </html>
效果：
appendChild(节点) 追加一个节点，每次都在尾部追加。
appendChild有两种意思：1.先把元素从原有父级上删掉 2.添加到新的父级
如：点击移动按钮，使最上面的移到最下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#ul1 {
background: green;
}
</style>
<script>
window.onload = function () {
var oUl1 = document.getElementById(\'ul1\');
var oBtn = document.getElementById(\'btn1\');
oBtn.onclick = function () {
var oLi = oUl1.children[0];
oUl1.appendChild(oLi);
};
};
</script>
</head>
<body>
<input id=\'btn1\' type="button" value="移动">
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
效果：
借用appendChild可以排序：
如：点击排序按钮，使数字从小到大排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#ul1 {
background: green;
}
</style>
<script>
window.onload = function () {
var oUl1 = document.getElementById(\'ul1\');
var oBtn = document.getElementById(\'btn1\');
var aLi = oUl1.getElementsByTagName(\'li\');
oBtn.onclick = function () {
var arr = [];
for(var i=0;i<aLi.length;i++){
arr[i] = aLi[i];
}
arr.sort(function (li1,li2) {
var num1 = parseInt(li1.innerHTML);
var num2 = parseInt(li2.innerHTML);
return num1 - num2;
});
for(var i=0;i<arr.length;i++){
oUl1.appendChild(arr[i]);
}
};
};
</script>
</head>
<body>
<input id=\'btn1\' type="button" value="排序">
<ul id="ul1">
<li>16</li>
<li>12</li>
<li>36</li>
<li>24</li>
</ul>
</body>
</html>
效果：
2.插入元素
insertBefore(节点，原有节点) 在已有元素前插入
例子：倒序插入li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var oBtn = document.getElementById(\'btn\');
var oUl = document.getElementById(\'ul1\');
var oText = document.getElementById(\'text1\');
var aLi = oUl.getElementsByTagName(\'li\');
oBtn.onclick = function () {
var oLi = document.createElement(\'li\');
oLi.innerHTML = oText.value;
if(aLi.length > 0){
oUl.insertBefore(oLi,aLi[0]);
}else {
oUl.appendChild(oLi);
}
}
};
</script>
</head>
<body>
<input id=\'text1\' type="text">
<input id="btn" type="button" value="创建li">
<ul id="ul1">
</ul>
</body>
</html>
效果：
3.删除DOM元素
removeChild(节点) 删除一个节点
例子：删除li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var oUl = document.getElementById(\'ul1\');
var aA = document.getElementsByTagName(\'a\');
for(var i=0;i<aA.length;i++){
aA[i].onclick = function () {
oUl.removeChild(this.parentNode);
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>111111<a href="#">删除</a></li>
<li>222222<a href="#">删除</a></li>
<li>333333<a href="#">删除</a></li>
<li>444444<a href="#">删除</a></li>
<li>555555<a href="#">删除</a></li>
</ul>
</body>
</html>
效果：
以上是关于DOM(创建插入和删除元素)的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript之DOM-5 增加删除和替换节点(创建节点插入节点删除和替换节点)