Reusable createElement()

Function Explanation

The createElement function creates a new HTML element with optional classes and content.

Parameters

tagName: The type of element you want to create (e.g., ‘div’, ‘h1’).
classList: (Optional) A string of class…


This content originally appeared on DEV Community and was authored by _Khojiakbar_

Function Explanation

The createElement function creates a new HTML element with optional classes and content.

Parameters

tagName: The type of element you want to create (e.g., 'div', 'h1').
classList: (Optional) A string of classes you want to add to the element.
content: (Optional) The inner HTML content you want to add inside the element.

Steps

  1. It creates a new element of the type specified by tagName.
  2. If classList is provided, it sets the element's class attribute.
  3. If content is provided, it sets the element's inner HTML content.
  4. It returns the created element. 
function createElement(tagName, classList, content) {
    // Create an element of type tagName
    const tag = document.createElement(tagName);

    // If classList is provided, set the class attribute
    if (classList) tag.setAttribute('class', classList);

    // If content is provided, set the inner HTML
    if (content) tag.innerHTML = content;

    // Return the created element
    return tag;
}

// Example usage
console.log(createElement('h1', 'bg-success p-3', 'Hello world')); 
// Output: <h1 class="bg-success p-3">Hello world</h1>

console.log(createElement('div')); 
// Output: <div></div>

In the examples:

  • The first call creates an <h1> element with the classes bg-success and p-3, and the content "Hello world".
  • The second call creates an empty <div> element with no classes or content.


This content originally appeared on DEV Community and was authored by _Khojiakbar_


Print Share Comment Cite Upload Translate Updates
APA

_Khojiakbar_ | Sciencx (2024-06-26T23:20:47+00:00) Reusable createElement(). Retrieved from https://www.scien.cx/2024/06/26/reusable-createelement/

MLA
" » Reusable createElement()." _Khojiakbar_ | Sciencx - Wednesday June 26, 2024, https://www.scien.cx/2024/06/26/reusable-createelement/
HARVARD
_Khojiakbar_ | Sciencx Wednesday June 26, 2024 » Reusable createElement()., viewed ,<https://www.scien.cx/2024/06/26/reusable-createelement/>
VANCOUVER
_Khojiakbar_ | Sciencx - » Reusable createElement(). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/26/reusable-createelement/
CHICAGO
" » Reusable createElement()." _Khojiakbar_ | Sciencx - Accessed . https://www.scien.cx/2024/06/26/reusable-createelement/
IEEE
" » Reusable createElement()." _Khojiakbar_ | Sciencx [Online]. Available: https://www.scien.cx/2024/06/26/reusable-createelement/. [Accessed: ]
rf:citation
» Reusable createElement() | _Khojiakbar_ | Sciencx | https://www.scien.cx/2024/06/26/reusable-createelement/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts