DOM动态操作元素节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function insert () {
//1.创建一个元素的标签
var inputs = document.createElement("input");
//2.往标签中添加属性
inputs.setAttribute("type","text");
inputs.setAttribute("value","这是新添加的文本输入框");
//3.获取到父标签
var bodys = document.body;
//4.把新创建的标签,,添加body中 add:添加 /appen:追加
bodys.appendChild(inputs);
}
function delte () {
//1.获取到要删除的元素
var del_div = document.getElementById("del_div");
//2.获取到父标签
var body = document.body;
//3.从父标签中删除
body.removeChild(del_div);
}
function update () {
//1.获取到替换的元素
var old = document.getElementById("update_div");
//2.创建新的元素
var news = document.createElement("input");
news.setAttribute("type","text");
news.setAttribute("value","这是替换过来的元素");
//3.获取父标签
var body = document.body;
//4.替换标签
body.replaceChild(news,old);
}
</script>
</head>
<body>
<div id="del_div">请删除掉这个元素</div>
<div id="update_div" >请修改这个元素</div>
<button onclick="insert()">动态添加一个元素</button>
<button onclick="delte()">动态删除一个元素</button>
<button onclick="update()">动态替换一个元素</button>

</body>
</html>
阅读更多

没有更多推荐了,返回首页