首页 > 代码库 > javascript中级--DOM元素的创建、插入、删除
javascript中级--DOM元素的创建、插入、删除
一、创建DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function() {
var oBtn = document.getElementById(‘btn1‘);
var oUl = document.getElementById(‘ul1‘);
oBtn.onclick = function() {
var oLi = document.createElement(‘li‘); //创建一个元素
oUl.appendChild(oLi); //把li插入到父级
}
}
</script>
</head>
<body>
<input id="btn1" type="button" name="" value="http://www.mamicode.com/创建li">
<ul id="ul1"></ul>
</ul>
</body>
</html>
二、插入DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function() {
var oBtn = document.getElementById(‘btn1‘);
var oUl = document.getElementById(‘ul1‘);
var oTxt = document.getElementById(‘txt1‘);
oBtn.onclick = function() {
var oLi = document.createElement(‘li‘); //创建一个元素
var aLi = document.getElementsByTagName(‘li‘);
oLi.innerHTML = oTxt.value;
if (aLi.length == 0) {
oUl.appendChild(oLi); //把li插入到父级后面
} else {
oUl.insertBefore(oLi, aLi[0]); //把li插入到aLi[0]前面
}
oTxt.valuehttp://www.mamicode.com/= "";
}
}
</script>
</head>
<body>
<input id="txt1" type="text">
<input id="btn1" type="button" name="" value="http://www.mamicode.com/插入">
<ul id="ul1"></ul>
</ul>
</body>
</html>
三、删除DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function() {
var aA = document.getElementsByTagName(‘a‘);
var oUl = document.getElementById(‘ul1‘);
var i = 0;
for (i = 0; i < aA.length; i++) {
aA[i].onclick = function() {
oUl.removeChild(this.parentNode); //删除
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>asdfasdf
<a href="javascript:;">删除</a>
</li>
<li>123
<a href="javascript:;">删除</a>
</li>
<li>xcvx
<a href="javascript:;">删除</a>
</li>
</ul>
</body>
</html>
javascript中级--DOM元素的创建、插入、删除
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。