DOM对HTML元素增删改查的操作1

来源：互联网发布：分时九转指标公式源码编辑：程序博客网时间：2024/06/05 01:08

代码：

1.节点的增删改查操作

<!DOCTYPE html><html> <head>  <title>创建元素</title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script type="text/javascript">     function create(){      var city=document.getElementById("city");  var element=document.createElement("li");  element.innerHTML="南京";  //city.appendChild(element);//插入节点  //city.insertBefore(element,city.firstChild.nextSibling); // city.replaceChild(element,city.firstChild.nextSibling);//替换节点 } function copy(){      var city=document.getElementById("city");  var element=city.firstChild.nextSibling.cloneNode(true);  city.appendChild(element); } function del(){      var city=document.getElementById("city");  var element=city.firstChild.nextSibling;  city.removeChild(element); }   </script> </head> <body>   <ul id="city">    <li>北京</li>    <li>上海</li><input type="button" value="创建复制替换节点"  onclick="create()"/>    <input type="button" value="复制节点"  onclick="copy()"/><input type="button" value="删除节点" onclick="del()"/>   </ul> </body></html>

2.列表框，下拉列表框的增删改查

<!DOCTYPE html><html> <head>  <title>创建元素</title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script type="text/javascript">    function createSelect(){ var element=document.createElement("select"); for(var i=0;i<10;i++) {      var op=new Option("新增的选项"+i,i);  element.options[i]=op; } element.size=5;//显示属性的一半 element.id="city"; document.getElementById("test").appendChild(element);}function delOne(){     var city=document.getElementById("city"); if(city.options.length>0) {       //city.remove(city.options.length-1);   city.options[city.options.length-1]=null;//删除列表的第二种方式 }}function clearAll(){ var city=document.getElementById("city");     if(city.options.length>0) {       city.options.length=0; }}  </script> </head> <body id="test">   <input type="button" value="创建一个城市列表框" onclick="createSelect()"/>   <input type="button" value="一条条删除列表框内容" onclick="delOne()"/>   <input type="button" value="一次性清空列表框内容" onclick="clearAll()"/>    </body></html>

知识点总结：

0 0