JavaScript - prepend() method

revision: February 15, 2024

Category : document

The Document.prepend() method inserts a set of Node objects or string objects before the first child of the document. String objects are inserted as equivalent Text nodes. This method prepends a child to a Document. To prepend to an arbitrary element in the tree, see Element.prepend().

Syntax :

        prepend(param1)
        prepend(param1, param2)
        prepend(param1, param2, /* …, */ paramN)

Parameters:

param1,...,paramN : a set of node or string objects to insert.

Examples:

            let html = document.createElement("html");
            document.prepend(html);

            let doc = new Document();
            let html = document.createElement("html");
            doc.prepend(html);
            doc.children; // HTMLCollection [<html>]

Category : element

The Element.prepend() method inserts a set of Node objects or string objects before the first child of the Element. String objects are inserted as equivalent Text nodes.

Syntax :

        prepend(param1)
        prepend(param1, param2)
        prepend(param1, param2, /* … ,*/ paramN)

Parameters:

param1, …, paramN : a set of Node or string objects to insert.

Examples:

            let div = document.createElement("div");
            let p = document.createElement("p");
            let span = document.createElement("span");
            div.append(p);
            div.prepend(span);
            console.log(div.childNodes); // NodeList [ <span>, <p> ]            

            let div = document.createElement("div");
            div.append("Some text");
            div.prepend("Headline: ");
             console.log(div.textContent); // "Headline: Some text"

            let div = document.createElement("div");
            let p = document.createElement("p");
            div.prepend("Some text", p);
            console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]

Practical examples

example: using the prened() methot to prepend an element.

HTML

code:

                    <div>
                        <ul id="prepend-1">
                            <li>HTML</li>
                        </ul>
                    </div>
                    <script>
                        let app = document.querySelector('#prepend-1');
                        let langs = ['CSS','JavaScript','TypeScript'];
                        let nodes = langs.map(lang => {
                            let li = document.createElement('li');
                            li.textContent = lang;
                            return li;
                        });
                        app.prepend(...nodes);
                    </script>

example: using the prepend() method to prepend text to an element.

code:

                    <div>
                        <div id="prepend-2"></div>
                    </div>
                    <script>
                        let app1 = document.querySelector('#prepend-2');
                        app1.prepend('prepend() Text Demo');
                        console.log(app1.textContent);
                        document.getElementById("prepend-2").innerHTML = app1.textContent;
                    </script>

example: prepending text

JavaScript
C#
Java
Python

code:

                    <div>
                        <ul id="list">
                            <li>JavaScript</li>
                            <li>C#</li>
                            <li>Java</li>
                            <li>Python</li>
                        </ul>
                    </div>
                    <script>
                        let first = document.querySelector('#list li:first-child');
                        first.prepend('The number one language is ');
                    </script>