javascript 动态创建元素appendChild,并加入删除操作removeChild

最新推荐文章于 2024-01-19 00:21:38 发布

戴宇琪

最新推荐文章于 2024-01-19 00:21:38 发布

阅读量2.6k

点赞数

分类专栏： WEB前端开发

本文链接：https://blog.youkuaiyun.com/yuqidai/article/details/51612584

版权

WEB前端开发专栏收录该内容

48 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript 动态创建元素appendChild,并加入删除操作removeChild</title>
<script>
window.onload = function(){
    var oInp = document.getElementsByTagName('input');
    var oUl = document.getElementById('ul1');
    
    oInp[1].onclick = function(){
        
        var oLi = document.createElement('li'); 
        var oA = document.createElement('a');   
        
        oA.http = 'javascript:;';
        oA.innerHTML = '删除';
        
        oA.onclick = function(){
            oUl.removeChild(this.parentNode);
            }
            
        oLi.innerHTML = oInp[0].value;
        oLi.appendChild(oA);
        oUl.appendChild(oLi);
        }
    }
</script>
</head>
<body>
<input type="text" /> <input type="button" value="留言"  />
<ul id="ul1"></ul>
</body>
</html>