JS 在div中添加元素：使用document.createElement（）

最新推荐文章于 2024-07-17 15:26:15 发布

白沙王

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量1.8k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50784508/article/details/131125409

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        onload = function () {
            this.document.getElementById('btnImg').onclick = function () {
                //创建Img对象（创建一个元素）
                var img = document.createElement('img');
                //通过属性src指定要显示的图片
                img.src = 'img/bird1.png';
                //在div中追加图片对象
                document.getElementById('divContation').appendChild(img);
            };
            //追加文本框
            this.document.getElementById('btnText').onclick = function () {
                //创建input对象
                var input = document.createElement('input');
                //设置属性
                input.type = "text";
                //加入div中
                document.getElementById('divContation').appendChild(input);
            };
            //追加超链接
            this.document.getElementById("btnA").onclick = function () {
                //创建a的对象
                var a = document.createElement('a');
                a.href = '09.html';
                a.innerHTML = "点击显示";
                //加入div中
                document.getElementById('divContation').appendChild(a);
            };

            //删除所有元素
            this.document.getElementById('btnRemove').onclick = function () {
                //获取所有子元素
                var childs = document.getElementById('divContation').childNodes;
                //遍历子元素，逐个删除
                for (var i = childs.length - 1; i >= 0; i--) {
                    document.getElementById('divContation').removeChild(childs[i]);
                }
            }
        };
    </script>
</head>
<body>
    <input id="btnImg" type="button" value="图片" />
    <input id="btnText" type="button" value="文本框" />
    <input id="btnA" type="button" value="超链接" />
    <input id="btnRemove" type="button" value="删除所有元素" />
    <div id="divContation">

    </div>
</body>
</html>