How to add text in a html page using javascript ?

Active March 08, 2022 / Viewed 60 / Comments 0 / Edit

Examples of how to add text in a html page using javascript:

Summary

Add text using innerHTML
Add text using creating elements and text nodes
References

Add text using innerHTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <div id="intro">
                <h1>Learning Javascript</h1>
                <p>First paragraph</p>
        </div>

        <script>

            document.querySelector("#intro").innerHTML +=
                "<p>Second paragraph</p>";

        </script>

    </body>
</html>

How to add text in a html page using javascript ?

Add text using creating elements and text nodes

Another solution is

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>

            <div id="intro">
                    <h1>Learning Javascript</h1>
                    <p>First paragraph</p>
            </div>

            <script>

                var mytag = document.createElement('p');
                var mytext = document.createTextNode('Second paragraph');

                mytag.appendChild(mytext);

                var div = document.querySelector("#intro");

                div.appendChild(mytag);

            </script>


        </body>
    </html>