您的位置：首页 > Web前端 > JavaScript
JS基础-DOM增删改

2019-05-29 21:30 260 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
function myClick(idStr, fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
};
// 创建一个"广州"节点,添加到#city下
myClick('btn01', function(){
// 创建广州节点<li>广州</li>

// document.createElement()
// 可以用于创建一个元素节点对象,它需要一个标签名作为参数,将会根据该标签名创建元素节点对象.
// 并将创建好的对象作为返回值.
// 创建li元素节点
var li = document.createElement('li');

// 创建文本节点:document.createTextNode()
// 可以用来创建一个文本节点对象
// 需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
// 创建广州文本节点
var gzText = document.createTextNode('广州');

// 将gzText设置li的子节点
// appendChild()
//  -向一个父节点中添加一个新的子节点
//  -用法:父节点.appendChild(子节点);
li.appendChild(gzText);

// 获取id为city的节点:
var city = document.getElementById('city');

// 将广州添加到city下
city.appendChild(li);
});

// 将"广州"节点,插入到#bj前面
myClick('btn02', function(){
// 创建广州
var li = document.createElement('li');
var gzText = document.createTextNode('广州');
li.appendChild(gzText);

// 获取id为bj的节点
var bj = document.getElementById('bj');

// 获取city
var city = document.getElementById('city');
/*
insertBefore()
-可以在指定的子节点前插入新的子节点
-语法:
父节点.insertBefore(新节点,旧节点);
*/
city.insertBefore(li, bj);
});

// 使用广州节点,替换#北京节点
myClick('btn03', function(){
var li = document.createElement('li');
var gzText = document.createTextNode('广州');
li.appendChild(gzText);

var bj = document.getElementById('bj');
var city = document.getElementById('city');
/*
replaceChild()
-可以使用指定的子节点替换已有的子节点.
-语法:父节点.replaceChild(新节点, 旧节点);
*/
city.replaceChild(li, bj);
});

// 删除#bj节点
myClick('btn04', function(){
var bj = document.getElementById('bj');
var city = document.getElementById('city');
/*
removeChild()
可以删除一个子节点
语法:父节点.removeChild(子节点);
*/
// city.removeChild(bj);
// 下面这种方法比上面方法更加方便,通过parentNote获取父节点,然后在删除这个子节点.
bj.parentNode.removeChild(bj);
});

// 读取#city内的html代码
myClick('btn05', function(){
var city = document.getElementById('city');
alert(city.innerHTML);
});

// 设置#bj内的html代码
myClick('btn06', function(){
var bj = document.getElementById('bj');
bj.innerHTML = '福州';
});

// 向city中添加连江
// 使用innerHTML也可以完成DOM的增删改的相关操作
city.innerHTML += "<li>连江</li>";
// 这种方式与appendChild()相比动作比较大,会把原来代码删除重新添加,比较消耗资源.
// 一般我们会两种方式结合使用
myClick('btn07', function(){
var city = document.getElementById('city');
var li = document.createElement('li');
li.innerHTML = '连江';
city.appendChild(li);
});
};
</script>
</head>
<body>
<div id="total">
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>

<div id="btnList">
<button id="btn01">创建"广州"节点,添加到#city下</button>
<button id="btn02">将"广州"节点,插入到#bj前面</button>
<button id="btn03">使用"广州"节点,代替#bj节点</button>
<button id="btn04">删除#bj节点</button>
<button id="btn05">读取#city内的html代码</button>
<button id="btn06">设置#bj内的html代码</button>
<button id="btn07">创建"连江"节点,添加到#city下</button>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航