How To Create Element Example Using JavaScript?

Nov 10, 2021 . Admin

Hello Friends,

Now let's see example of how to create element example. We will use how to create element in javascript. This is a short guide on create element. Let's get started with how to create element in javascript.

Here i will give you many example how you can create element javascript.

Example : 1

<!DOCTYPE html>
<html>
    <head>
        <title>How To Create Element Example Using JavaScript? - MyWebtuts.com</title>
    </head>
    <body>
        <h3>How To Create Element Example Using JavaScript? - MyWebtuts.com</h3>
        <p>It is an example of using the document.createElement() method. </p>
        <h4>Click the below button to insert a new button element in the document. </h4>
        <button onclick = "a1()">Create Button</button>
        <script>
            function a1() {
                var btn = document.createElement("button");
                btn.innerHTML = "Click me";
                document.body.appendChild(btn);
            }
        </script>
    </body>
</html>

Output :

Example : 2

<!DOCTYPE html>
<html>
    <head>
        <title>How To Create Element Example Using JavaScript? - MyWebtuts.com</title>
    </head>
    <body>
        <h3>How To Create Element Example Using JavaScript? - MyWebtuts.com</h3>
        <p> It is an example of using the document.createElement() method. </p>
        <h4>Click the below button to insert a new button element in the document.</h4>
        <div id = "a2">
            <p id = "b1">This is MyWebtuts Paragraph.</p>
        </div>
        <button onclick = "a1()"> Create Button </button>

        <script>
            function a1() {
                var btn = document.createElement("button");
                btn.innerHTML = "Click me";
                
                var element = document.getElementById("a2");
                var child = document.getElementById("b1");
                element.insertBefore(btn, child);
            }
        </script>
    </body>
</html>

Output :