JS_dom追加查询删除节点-优快云博客

本文提供了一个使用JavaScript进行DOM操作的示例，包括如何创建、追加、插入和删除DOM元素。示例中定义了三个函数f1、f2、f3，分别用于向指定的ul元素中追加、插入新li元素及删除已有的li元素。

<!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>