SoFunction
Updated on 2025-03-01

How to add a button to a page in JavaScript

Use two ways to add a button to the page, namely appendChild() and innerHTML properties, namely appendChild() and innerHTML properties

appendChild()

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         = function () 
        {
            var oBtn = ("input");
             = "btn";
             = "button";
             = "Button"
            (oBtn);
        }
    </script>
</head>
<body>
</body>
</html>

innerHTML attribute

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         = function () 
        {
             = '<input id = "btn" type = "button" value = "Button" />';
        }
    </script>
</head>
<body>
</body>
</html>

The difference between the two methods: If the inserted element is relatively simple, both methods can be used. If the inserted element is relatively complicated, you can only use the innerHTML attribute to implement it.

This is the article about how JavaScript adds a button to the page. For more related js pages, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!