JavaScript向页面中添加一个按钮

最新推荐文章于 2024-08-07 21:58:12 发布

我是星星bling

最新推荐文章于 2024-08-07 21:58:12 发布

阅读量7.4k

点赞数 1

分类专栏： JavaScript学习文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/qq_45099319/article/details/126970874

版权

JavaScript学习专栏收录该内容

1 篇文章 1 订阅

订阅专栏

使用两种方式向页面中添加一个按钮，分别是appendChild()和innerHTML属性

appendChild()

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.createElement("input");
            oBtn.id = "btn";
            oBtn.type = "button";
            oBtn.value = "按钮"
            
            document.body.appendChild(oBtn);
        }
    </script>
</head>
<body>
    
</body>
</html>

innerHTML属性

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            document.body.innerHTML = '<input id = "btn" type = "button" value = "按钮" />';
        }
    </script>
</head>
<body>
    
</body>
</html>

两种方式的区别：如果插入的元素比较简单的话，两个方法都可以使用，如果插入的元素比较复杂的话只能用innerHTML属性来实现。