JavaScript - createElement() method

revision:

Category : document

In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.

Syntax : 

        document.createElement(tagName)
        document.createElement(tagName, options)

Parameters:

tagName : a string that specifies the type of element to be created. The nodeName of the created element is initialized with the value of tagName. Don't use qualified names (like "html:a") with this method. When called on an HTML document, createElement() converts tagName to lower case before creating the element. In Firefox, Opera, and Chrome, createElement(null) works like createElement("null").

options : optional. An object with the following properties: "is" . The tag name of a custom element previously defined via customElements.define().

Examples: 

            <div>
                <div id="div1">The text above has been created dynamically.</div>
            </div>
            <script>
                document.body.onload = addElement;
                function addElement() {
                // create a new div element
                const newDiv = document.createElement("div");
    
                // and give it some content
                const newContent = document.createTextNode("Hi there and greetings!");
    
                // add the text node to the newly created div
                newDiv.appendChild(newContent);
    
                // add the newly created element and its content into the DOM
                const currentDiv = document.getElementById("div1");
                document.body.insertBefore(newDiv, currentDiv);
                }
                
            </script>

Practical examples

example: create a <p> element and append it to the document

code: 
                    <div>
                        <p id="one"></p>
                    </div>
                    <script>
                        // Create element:
                        const para = document.createElement("p");
                        para.innerText = "This is a paragraph.";
                        // Append to element:
                        document.getElementById("one").appendChild(para);
                    
                    </script>

example: create a <p> element and append it to an element

A DIV element

code: 
                    <div>
                        <div id="myDIV" style="padding:1.6vw;background-color:lightgray">
                            <h4>A DIV element</h4>
                        </div>    
                    </div>
                    <script>
                        // Create element:
                        const para1 = document.createElement("p");
                        para1.innerHTML = "This is another paragraph.";
                        // Append to another element:
                        document.getElementById("myDIV").appendChild(para1);
                    </script>

example: create a button element

code: 
                    <div>
                        <p id="but"></p>
                    </div>
                    <script>
                    const btn = document.createElement("button");
                    btn.innerHTML = "Hello Button";
                    document.getElementById("but").appendChild(btn);