DOM通过JavaScript增删查（小白）

输出效果

添加用户名和密码会在下面表格中显示；也可以在表格中进行删除操作。如图：

1.首先要在html里建一个框架，放一个div在div里用label，input，button，table来构成一个简易的框架。详情如下代码所示：

  <div>
        <label for="usename">用户名：</label>
        <input type="text" id="usename">
        <label for="age">年龄：</label>
        <input type="text" id="age">
        <button id="btn">添加</button>
        <table id="tal">
            <thead><tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tby">
                <tr>
                    <td>jack</td>
                    <td>20</td>
                    <td id="otd2"><a href="#">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>

2.document查：属性和getElementById()
var tby = document.getElementById(‘tby’);对上面的tbody的id查看属性
var text1 = document.getElementById(‘usename’);
var text2 = document.getElementById(‘age’);
对上面input的ID查看属性
3.document添加
createElement()创建元素节点对象
appendChild()以节点的形式追加到指定节点中
4.复制节点
flag 默认为false 不复制子节点 true 复制子节点
var otd22 = document.getElementById(‘otd2’);
var newotd2 = otd22.cloneNode(true);//复制节点
otr.appendChild(newotd2);
5.所有script代码

 var tby = document.getElementById('tby');
        var text1 = document.getElementById('usename');
        var text2 = document.getElementById('age');
        document.getElementById('btn').onclick = function () {
            //创建tr
            var otr = document.createElement('tr');
            //创建td
            var otd = document.createElement('td');
            var otd1 = document.createElement('td');
            //将td放入tr
            otr.appendChild(otd);
            otr.appendChild(otd1);
            //将tr放入tbody
            tby.appendChild(otr);
            //将输出数据放表格中
            otd.innerHTML = text1.value;
            otd1.innerHTML = text2.value;
            //复制删除节点
            var otd22 = document.getElementById('otd2');
            var newotd2 = otd22.cloneNode(true);
            otr.appendChild(newotd2);
            //点击删除事件
            var len = document.links.length;
            for (var i = 0; i < len; i++) {
                document.links[i].onclick = function () {
                    tby.removeChild(this.parentNode.parentNode);
                    // this.parentNode.parentNode.removeChild( this.parentNode) ;    
                }
            }
        }