Create Element JS helps in removing redundancy & complication while creating synamic elements using Vanilla JS.
Import
โ Declare
โ Call
Enable into your project by importing -
https://elementsjs.blob.core.windows.net/public/create-elements.js
Declare on your web-page within <body>
or <head>
<script src="https://elementsjs.blob.core.windows.net/public/create-elements.js"></script>
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 |
<h2> Bootstrap heading</h2>
We have to declare it as below -
var h2 = create_element('h2', null, null, ' Bootstrap heading');
<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);
<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
<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}
- Now supports Key Attributes without values like autoplay, loop, disabled, checked, etc.
- Initial Release
Licensed by MIT
Developed by Divyamshu Gupta