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

1，DOM创建节点的方法：

document.createElement(Tag),Tag必须是合法的HTML元素

DOM复制节点的方法：

节点.cloneNode(boolean deep)，当deep为true时，表示复制当前节点以及当前节点的全部后代节点。为false时，只复制当前节点。

DOM添加、删除节点的方法：

appendChild(newNode)	将newNode添加成当前节点的最后一个子节点
insertBefore(newNode,refNode)	在refNode节点之前插入newNode节点
replaceChild(newNode,oldNode)	将oldNode节点替换成newNode节点
removeChild(oldNode)	将oldNode子节点删除

<ul id="city">
        <li>北京</li>
        <li>上海</li>
    </ul>
    <input type="button" value="创建复制替换节点" onclick="create()"/>
    <input type="button" value="复制节点" onclick="copy()"/>
    <input type="button" value="删除节点" onclick="del()"/>
    <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>

2，DOM动态添加删除表格内容所使用到的常用方法：

insertRow(index)	在指定索引位置插入一行
createCaption()	为该表格创建标题
createTFoot()	为该表格创建<tfoot.../>元素，假如已存在就返回现有的
createTHead()	为该表格创建<thead.../>元素，假如已存在就返回现有的
deleteRow(index)	删除表格中index索引处的行
deleteCaption	删除表格标题
deleteTFoot()	从表格删除tFoot元素及其内容
deleteTHead()	从表格删除tHead元素及其内容

给表格行创建、删除单元格的方法：

insertCell(index)	在index处创建一个单元格，返回新创建的单元格
deleteCell(index)	删除某行在index索引处的单元格

<script type="text/javascript">
        function createTable(){
            var b=document.getElementById('test');
            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 delLastRow(){
            var t=document.getElementById("mytable");
            if(t.rows.length>0){
                t.deleteRow(t.rows.length-1)
            }
        }
        function delLastCell(){
            var t=document.getElementById("mytable");
            if(t.rows.length>0){
                t.rows[t.rows.length-1].deleteCell(t.rows[t.rows.length-1].cells.length-1);
            }
        }
    </script>
    <input type="button" value="创建5行4列表格" onclick="createTable()"/>;
    <input type="button" value="删除最后一行" onclick="delLastRow()"/>
    <input type="button" value="删除最后一个单元格" onclick="delLastCell()"/>