8.24增删改下拉菜单和表格
创建元素
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
</ul>
<input type="button" value="创建插入替换节点" onClick="create3()">
<input type="button" value="复制节点" onClick="copy()">
<input type="button" value="删除节点" onClick="del()">
</body>
</html>
var ul;
window.onload=function(){
ul=document.getElementById("city");
}
//设置css样式格式：元素节点.style.样式名=样式值
function create(){
//创建新元素节点li
var li=document.createElement("li");
//给新节点添加文本节点
li.innerHTML="淄博";
//设置红色
li.style.background="blue";
li.style.color="red";
//将新节点li添加在ul的最后一个子节点上
ul.appendChild(li);
}
//插入节点
function create2(){
//创建新节点li
var li=document.createElement("li");
//获取旧节点（你要在谁前面插入这个新节点）
//var ref=ul.firstChild.nextSibling;
// alert(ref.innerHTML);
var ref=ul.getElementsByTagName("li")[0];
//在旧节点前插入新节点li
li.innerHTML="淄博";
ul.insertBefore(li,ref);
}
function create3(){
var li=document.createElement("li");
li.innerHTML="济南";
var ref=ul.getElementsByTagName("li")[0];
ul.replaceChild(li,ref);
}
//复制节点
function copy(){
//获取要复制的节点
var li=ul.getElementsByTagName("li")[0];
//复制旧节点，获取新节点
//浅复制
// var newli=li.cloneNode(false);
//深复制
var newli=li.cloneNode(true);
//将新节点添加到父节点上
ul.appendChild(newli);
}
//删除节点
function del(){
//获取最后一个节点的下标
var index=ul.getElementsByTagName("li").length-1;
//获取最后一个元素节点
var li=ul.getElementsByTagName("li")[index];
//删除节点
ul.removeChild(li);
}
查找表单控件
<body id="test">
<input type="button" value="创建一个城市列表框" onClick="create()">
<input type="button" value="一条条删除列表框的内容" onClick="del()">
<input type="button" value="一次性清空列表框内容" onClick="clear1()">
</body>
</html>
//创建下拉菜单
var sel;
function create(){
//创建下拉菜单元素节点
sel=document.createElement("select");
//给sel属性节点赋值
sel.id="myselect";
sel.size=3;
//将下拉菜单元素节点添加至body标签
//获取body元素节点
var body=document.getElementsByTagName("body")[0];
//将下拉菜单元素节点添加到body
body.appendChild(sel);
//创建选项节点
for(var i=0;i<5;i++){
//格式：选项节点=new Option(文本节点，value属性值)
var op=new Option("选项"+i,i);
//将选项添加至select
sel.appendChild(op);
}
}
//一条一条删除option
function del(){
//获取最后一个option元素下标
var index=sel.options.length-1;
//删除最后一个元素
sel.remove(index);
}
//一次性清空option
function clear1(){
//让option数组长度为0
sel.options.length=0;
}
对表格元素进行增删改操作
浙公网安备 33010602011771号