js 动态操作元素

<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        onload = function () {
            document.getElementById('btnImage').onclick = function () {
                var img = document.createElement('img');
                img.src = "bird1.png";
                document.getElementById('dv').appendChild(img);
            };
            document.getElementById('btnText').onclick = function () {
                var input = document.createElement('input');
                input.type = 'text';
                document.getElementById('dv').appendChild(input);
            };
            document.getElementById('btnLink').onclick = function () {
                var a = document.createElement('a');
                a.innerText = '163';
                a.href = 'http://www.163.com';
                document.getElementById('dv').appendChild(a);
            };
            document.getElementById('btnDel').onclick = function () {
                var nodes = document.getElementById('dv').childNodes;
                while (nodes.length>0) {
                    document.getElementById('dv').removeChild(nodes[0]);
                    nodes = document.getElementById('dv').childNodes;
                }


            }
        }
    </script>
</head>
<body>
    <input type="button" name="name" value="图片" id="btnImage" />
    <input type="button" name="name" value="文本框" id="btnText" />
    <input type="button" name="name" value="超链接" id="btnLink" />
    <input type="button" name="name" value="删除" id="btnDel" />
    <div id="dv">


    </div>
</body>
</html>
posted @ 2018-05-09 21:09  dxm809  阅读(116)  评论(0)  编辑  收藏  举报