利用js对html元素进行增删改操作

function createTable(){ ???????????????var b ???= ???document.getElementById("hai"); ???????var t ???= ???document.createElement("table"); ???????t.border ???= ???"1"; ???????t.id ???????= ???"mytable"; ???????var caption ???= ???t.createCaption(); ???????caption.innerHTML="我的表格"; ???????for(var i ???= ???0;i<5;i++){ ???????????var tr ???= ???t.insertRow(i); ???????????for(var j=0;j<4;j++){ ???????????????var td=tr.insertCell(j); ???????????????td.innerHTML="单元格"+i+j; ???????????} ???????} ???????b.appendChild(t); ???????????????????} ???function deleteLastRow(){ ???????????var t ???= ???document.getElementById("mytable"); ???????????if(t.rows.length>0){ ???????????????t.deleteRow(t.rows.length-1); ???????????} ???????} ???function deleteLastCell(){ ???????var t ???= ???document.getElementById("mytable"); ???????var lastRow=t.rows[t.rows.length-1]; ???????if(lastRow.cells.length>0){ ???????????lastRow.deleteCell(lastRow.cells.length-1); ???????????????????????????????} ???}

<input type="button" value="创建一个5行4列的表格" onclick="createTable()" /> ???<input type="button" value="删除最后一行" ?onclick="deleteLastRow()"/> ???<input type="button" value="删除最后一个单元格" onclick="deleteLastCell()" />

function wen(){ ???????var hai ???????= ???document.getElementById("hai"); ???????var element ???= ???document.createElement("li"); ???????element.innerHTML="昆明" ???????//复制节点 ???hai.appendChild(element); ???????//插入节点 ??hai.insertBefore(element,hai.firstChild.nextSibling); ???????// 替换节点 ?hai.replaceChild(element,hai.firstChild.nextSibling); ???????????} ???function luo(){ ???????var wen ???????= ???document.getElementById("thio"); ???????var element ???= ???hai.firstChild.nextSibling.cloneNode(true); ????????????hai.appendChild(element); ???} ???function del(){ ????var wen ???????= ???document.getElementById("thio"); ????var element ???= ???hai.firstChild.nextSibling; ????hai.removeChild(element); ???}

<ul id="hai"> ???<li>上海</li> ???<li>昆明</li> ???<li>杭州</li> ???</ul> ???<input type="button" value="创建复制替换节点" onclick="wen()" /> ???<input type="button" value=" 复制节点" onclick="luo()" /> ???<input type="button" value="删除节点" onclick="del()" />

function luohai(){ ???????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 ???="luo"; ???????document.getElementById("test").appendChild(element); ???} ???function delOne(){ ???????var luo=document.getElementById("luo"); ???????if(luo.options.length>0){ ???????????//luo.remove(luo.options.length-1) ???????????luo.options[luo.options.length-1]=null; ???????} ???} ???function clearAll(){ ???var luo=document.getElementById("luo"); ???????if(luo.options.length>0){ ???????????luo.options.length=0; ???????????????} ???}

<input type="button" value="创建一个城市列表框" onclick="luohai()" /> ???<input ?type="button" value="一条条删除列表框内容" onclick="delOne()"/> ???<input type="button" value="一次性清空列表框内容" onclick="clearAll()" />