使用两种方式向页面中添加一个按钮，分别是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属性来实现。

# javascript # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟