Create Elements JS

Create Element JS helps in removing redundancy & complication while creating synamic elements using Vanilla JS.

Import → Declare → Call

Compatibility

Enable into your project by importing -

https://elementsjs.blob.core.windows.net/public/create-elements.js

How to Import ?

Declare on your web-page within <body> or <head>

<script src="https://elementsjs.blob.core.windows.net/public/create-elements.js"></script>

How to Declare It ?

We need to Declare the following -

Element to be created
Attributes for the element
Parent Element Variable
Innertext for the element if any

create_element(Element Name , Attributes , Parent Element , Innertext);

Function Argument	Data Type	Required
Element Name	string	YES
Attributes	dictionary	Optional
Parent Element	string	Optional
Innertext	string	Optional

How to Call It ?

Example To Create a Heading

 <h2> Bootstrap heading</h2>

We have to declare it as below -

var h2 = create_element('h2', null, null, ' Bootstrap heading');

Example To Create Dynamically the input text field like below -

<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">

We have to declare it as below -

var input_text = create_element('input', {'type':'email';'class':'form-control';'id':'exampleFormControlInput1';'placeholder':'[email protected]'}, null, null);

------------------------------------------------------------------OR---------------------------------------------------------------------------------------

var input_text_attributes = {'type':'email';'class':'form-control';'id':'exampleFormControlInput1';'placeholder':'[email protected]'}
var input_text = create_element('input', input_text_attributes, null, null);

Example To Create Dynamically Create a Nested Elements -

<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

We have to declare it as below -

var div_mb_3 = create_element('div',{'class':'mb-3'}, null, null);
 var label = create_element('label',{'for': 'exampleFormControlTextarea1'; 'class' : 'form-label'}; div_mb_3; 'Example textarea')
 var textarea1 = create_element('textarea';{'class':'form-control';'id':'exampleFormControlTextarea1'}; div_mb_3; null)
 
 document.getElementById('root').appendChild(div_mb_3);  //Append Parent Element Only

Create an Video Source with Attributes without Values

<video width="320" height="240" controls autoplay>

We have to declare it as below -

 var div_video = create_element('video',{'width':'320', 'height':'240', 'controls':null, 'autoplay': null}, null, null);
 
 document.getElementById('root').appendChild(div_video);  //Append Parent Element Only

Warning

For Key Attributes without values like autoplay, disabled, etc. use value as null like {'control' : null}

Release & Updates

Release v1.1 (March 2024)

Now supports Key Attributes without values like autoplay, loop, disabled, checked, etc.

Release v1.0 (May 2022)

Initial Release

License

Licensed by MIT

Developed by Divyamshu Gupta

divyamshu / elements-js Goto Github PK

elements-js's Introduction

Create Elements JS

Compatibility

How to Import ?

How to Declare It ?

How to Call It ?

Example To Create a Heading

Example To Create Dynamically the input text field like below -

Example To Create Dynamically Create a Nested Elements -

Create an Video Source with Attributes without Values

Release & Updates

Release v1.1 (March 2024)

Release v1.0 (May 2022)

License

elements-js's People

Contributors

Stargazers

Watchers

Recommend Projects

Recommend Topics

Recommend Org