JS操作DOM
Dom的概念就不叙述，文章主要说如何增加和删除Dom节点。
1、在form表单中添加一个新节点
界面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<form id="form1">
<input type="button" value="添加" onclick="createDom();">
</form>
</body>
</html>
js代码
function createDom(){
//1.在form表单中添加一个新节点，类型是文本输入框
var formObj=document.getElementById("form1");
//创建新节点
var inputObj=document.createElement("input");
//赋值
inputObj.value="jack";
//追加到dom
formObj.appendChild(inputObj);
//2.在form表单中添加一个新节点为a链接，跳转百度
var aObj=document.createElement("a");
aObj.innerHTML="CLICK ME";
aObj.href="https://www.baidu.com";
formObj.appendChild(aObj);
//3，在form表单最前面加一个新节点为按钮，点击弹出hello
var btnObj=document.createElement("input");
btnObj.type="button";
btnObj.value="新按钮";
btnObj.onclick=addClick;
formObj.insertBefore(btnObj,formObj.firstChild);
}
function addClick(){
alert("hello")
}
效果图
2、二级菜单联动
界面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<form id="form1">
<select id="s1" onchange="showCity2();">
<option>请选择</option>
<option>江苏省</option>
<option>安徽省</option>
</select>
<select id="s2">
<option>请选择</option>
</select>
</form>
</body>
</html>
js代码
//方法一
function showCity(){
//简单的数据模拟
var arr=[];
var arr1=["南京","苏州","扬州"];
var arr2=["合肥","天长"];
arr[0]=["请选择"];
arr[1]=arr1;
arr[2]=arr2;
//获取下拉框
var sObj=document.getElementById("s1");
var sObj2=document.getElementById("s2");
var childNodes2=sObj2.childNodes;
//遍历删除二级菜单下所有Dom节点
while(childNodes2.length>0){
sObj2.removeChild(sObj2.firstChild);
}
//获取选中菜单序号（从0开始）
var index=sObj.selectedIndex;
var cities=arr[index];
for(var i=0;i<cities.length;i++){
var optionObj=document.createElement("option");
optionObj.innerHTML=cities[i];
sObj2.appendChild(optionObj);
}
}
//方法二
//使用HTML DOM 实现联动
function showCity2(){
var arr=[];
var arr1=["南京","苏州","扬州"];
var arr2=["合肥","天长"];
arr[0]=["请选择"];
arr[1]=arr1;
arr[2]=arr2;
//获取下拉框
var sObj=document.getElementById("s1");
var sObj2=document.getElementById("s2");
var index=sObj.selectedIndex;
var cities=arr[index];
sObj2.options.length=0;
//sObj2.innerHTML="";
for(var i=0;i<cities.length;i++){
var oObj=new Option(cities[i]);
sObj2.add(oObj)
}
}
效果图