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

代码：

1.节点的增删改查操作

创建元素

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);

}

• 北京
• 上海

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

创建元素

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;

}

}

知识点总结：