创建删除元素appendChild,removeChild,createElement,insertBefore

最新推荐文章于 2022-10-23 23:51:41 发布

diao1981

最新推荐文章于 2022-10-23 23:51:41 发布

阅读量347

点赞数

原文链接：http://www.cnblogs.com/Xuman0927/p/5507179.html

版权

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
    var oText = document.getElementById('text1');
    var oBtn = document.getElementById('btn');
    var oUl = document.getElementById('ul1');
    oBtn.onclick = function() {
        
        //创建li元素
        var oLi = document.createElement('li');//document.createElement(标签名称); 创建元素
        oLi.innerHTML = oText.value;
        
        //创建a 删除元素
        var oA = document.createElement('a');
        oA.innerHTML = '删除';
        oA.href = 'javascript:;';
        
        //删除事件
        oA.onclick = function() {
            oUl.removeChild( this.parentNode );//父级.removeChild(要删除的元素); 要删除元素的父级 this表示当前
        }
        
        oLi.appendChild( oA );
        /*
            父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
            在ie下如果第二个参数的节点不存在，会报错
            在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
            oUl.insertBefore( oLi, oUl.children[0] );
        */
        
        if ( oUl.children[0] ) {
            oUl.insertBefore( oLi, oUl.children[0] );
        } else {
            oUl.appendChild( oLi );//父级.appendChild(要添加的元素) 方法 追加子元素 oUl.appendChild( oLi );
        }
        
    }
    
}
</script>
</head>

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

转载于:https://www.cnblogs.com/Xuman0927/p/5507179.html

diao1981

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建删除元素appendChild,removeChild,createElement,insertBefore

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>window.onload = f...
复制链接

扫一扫