Explain createElement() method Arguments

Last Updated : 14 Apr, 2023

This article describes the arguments of the vue.js createElement() method. This method is used to create a virtual node of the HTML element along with innerHTML and other properties in the DOM.

This method can be used to dynamically instantiate an element. Vue.js creates a virtual DOM to observe dynamically created nodes. The virtual DOM is just a component tree of all virtual nodes.

The render function is used with createElement() method to render the created instance of the element. The render function is used within Vue components to perform tasks such as creating elements.

Syntax: The following is the syntax for creating and rendering HTML elements in vue.js:

render: function (createElement) {
    return createElement(....arguments...)
}

Arguments/Parameters:

TagName – ( String ) – TagName ( h1, p, span, etc.. ) of the element is required.
Options – ( Object ) – It contains HTML attributes, properties, event listeners, and class and style bindings.
Children – ( Array / String ) – For strings, the given string will be rendered as the element’s text. For arrays, you can call createElement again on the array to generate complex trees.

The TagName is required but the other two arguments are optional.

Before writing the example code just import the vue.js through the following CDN link:

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

Example 1: In this example, we have created a new paragraph <p> element using the createElement method inside the <div> element whose id is ‘test_comp’. In the below syntax, the first argument is the tag name – ‘p’ and the second argument – ‘Explain createElement Arguments?’ is the content of this <p> element.

createElement('p', 'Explain createElement Arguments?' );

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Vue.js CDN Link to import the 
         vue.js in the project -->
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">
    </script>
</head>
 
<body>
    <!-- Heading. -->
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <!-- Vue.js component -->
    <div id="test_comp"></div>
 
    <script>
        new Vue({
            el: '#test_comp',
 
            // CreateElement Method
            render(createElement) {
 
                // Return a 'p' node with 
                // the following text
                return createElement('p', 
                    'Explain createElement Arguments?')
            },
        });
    </script>
</body>
 
</html>

Output: As you can see a new <p> element is created after <h1> element inside the <div> element.

createElement Arguments

Example 2: In this example, we have created <img> element using the createElement method and applying some CSS, class name, and JavaScript functionality by passing an additional argument to this method. In the below syntax, the first argument is the tag name – ‘img’ and the second argument is the object. This object contains the attributes, styles, and JavaScript methods that will be applied to this <img> element.

The ‘attrs’ defines the attributes – src and alt, ‘style’ defines CSS properties, ‘class’ defines the class name, and ‘on’ defines the onclick method. All the properties defined in the object will be directly applied to this <img> element. When the user will click on this <img> defined alert will be generated automatically.

createElement('img', {
    attrs: {
        src: '../gfg.jpg',
        alt:'gfg',
    },

    style: {
        width : '200px',
        height : 'auto',
        border : '2px solid green',
        cursor: 'pointer'
    },

    class: ['gfg_image'],

    on: {
        click: this.click_method,
    }
})

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Vue.js CDN Link to import the 
         vue.js in the project -->
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">
    </script>
</head>
 
<body>
    <!-- Heading. -->
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <!-- Vue.js component. -->
    <div id="test_comp"></div>
 
    <script>
        new Vue({
 
            // Component
            el: '#test_comp',
             
            // Method object for defining 
            // the JS methods
            methods: {
             
                // Onclick method -
                click_method: function () {
 
                    // Alert will be generated
                    alert('Clicked!')
                }
            },
            render(createElement) {
                return createElement('img',
 
                    // Options object
                    {
                        // Img attributes
                        attrs: {
                            src:
'https://media.geeksforgeeks.org/wp-content/uploads/20230201193809/geeksforgeeks.jfif',
                            alt: 'gfg',
                        },
 
                        // CSS styling
                        style: {
                            width: '200px',
                            height: 'auto',
                            border: '2px solid green',
                            cursor: 'pointer'
                        },
 
                        // class-Name
                        class: ['gfg_image'],
 
                        // Onclick Event
                        on: {
                            click: this.click_method,
                        }
                    },
                )
            },
        });
    </script>
</body>
 
</html>