javascript——DOM之元素的创建删除实例

创建元素：document.createElement(标签名称); 

删除元素：父级.removeChild(要删除的元素); 

追加子元素：父级.appendChild(要添加的元素) 

在指定元素前面插入一个新元素：父级.insertBefore(新的元素，被插入的元素) 

HTML部分：

<body>
    <input type="text" id="text1">
    <input type="button" id="btn" value="留言">
    <ul id="ul1"></ul>
</body>

JS部分：

window.onload = function(){

        var oText = document.getElementById('text1');
        var oBtn = document.getElementById('btn');
        var oUl = document.getElementById('ul1');

        oBtn.onclick = function(){

            // 通过document.createElement创建li
            var oLi = document.createElement('li');

            // 然后把文本框的value值赋给li
            oLi.innerHTML = oText.value;

            //通过document.creatElement创建a
            var oA = document.createElement('a');

            //给a添加href和innerHMTLE
            oA.href = 'javascript:;';
            oA.innerHTML = '删除';
            
            //给a链接添加单击事件
            oA.onclick = function() {

                // 父级.removeChild(要删除的元素); 删除元素
                oUl.removeChild(this.parentNode);
            }

            //接着通过appendChild添加子元素 父级.appendChild(要添加的元素)
            oLi.appendChild(oA);
            
            // 接着清空文本框的value值
            oText.value = '';

            // 父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
            // oUl.insertBefore( oLi ,oUl.children[0] );

            /*    
                兼容处理
                在ie下如果第二个参数的节点不存在，会报错
                在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
            */
            if ( oUl.children[0] ) {
                oUl.insertBefore( oLi, oUl.children[0] );
            } else {
                oUl.appendChild( oLi );
            }

        };    

    };

 

posted @ 2015-03-04 17:00  波克比520  阅读(326)  评论(0)  编辑  收藏  举报