Created
February 5, 2021 20:02
-
-
Save Arsonist-Cook/96142329e9b49b5d3bb955767e0da9c4 to your computer and use it in GitHub Desktop.
I give up having a bad time to undestand my DOM element declaration!!!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Here is the deal... I had a bad time having fun writing my DOM elements before showing them up... | |
| * Bu, be sincere, its a pain having to copy and paste, even more when you have to configure step by step and the code becaming horible to read... | |
| * Anyway, that was my forst idea of trying to make these configurations more declarative... | |
| */ | |
| _createElement({ tag, classList, attribute }) { | |
| const element = document.createElement(tag); | |
| if (classList && Array.isArray(classList)) { | |
| element.classList.add(...classList); | |
| } | |
| if (attribute && typeof attribute === 'object') { | |
| for (const attr in attribute) { | |
| element.setAttribute(attr, attribute[attr]); | |
| } | |
| } | |
| return element; | |
| } | |
| /** | |
| * How does it work? | |
| * You just need to create an object following the format: | |
| * { | |
| * tag:<HTML tag to be created>,//Mandatory | |
| * classList:[<CSS's classes to be incorporated>],//Must be an array!!! | |
| * attributes:{<here goes all attributes to be set in your tag...} //must be an object, be aware of matching DOM attribute names... | |
| * } | |
| * Here comes some sample... | |
| * I was using Bulma framework... | |
| */ | |
| const input = { | |
| tag: 'input', | |
| classList: [ 'input', 'mb-6' ], | |
| attribute: { | |
| id: 'myInput', | |
| name: 'myInput', | |
| type: 'text' | |
| } | |
| }; | |
| const myInput = _createElement(input); | |
| /** | |
| * Now I dare you to copy, paste and try!!! | |
| * | |
| * I'll apreciate any coment if you find it usefull!!! | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment