码迷,mamicode.com
首页 > Web开发 > 详细

JS_dom追加查询删除节点

时间:2017-10-08 11:19:50      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:child   element   doc   cti   节点   app   before   设置   插入   

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function f1() {

//创建新的li(空的)
var li=document.createElement("li");
//给此li设置内容
li.innerHTML="郑州"
//再将它追加到ul
var ul=document.getElementById("city");
ul.appendChild(li);
}
function f2() {
//创建新节点
var li=document.createElement("li");
li.innerHTML="乌鲁木齐";
//获取新节点的父亲和弟弟
var ul=document.getElementById("city");
var gz=document.getElementById("gz");
//插入到父亲下弟弟前
ul.insertBefore(li, gz);
}
function f3() {
//获取要删除元素的父亲
var ul=document.getElementById("city");
//获取要删除的元素
var gz=document.getElementById("gz");
//通过父亲删除孩子
ul.removeChild(gz);
}
</script>
</head>
<body>
<input type="button" value="追加" onclick="f1();">
<input type="button" value="插入" onclick="f2();">
<input type="button" value="删除" onclick="f3();">
<ul id="city">
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li>深圳</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>

JS_dom追加查询删除节点

标签:child   element   doc   cti   节点   app   before   设置   插入   

原文地址:http://www.cnblogs.com/Bighua123/p/7636630.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!