create-html-elements-with-javascript-object

1.0.4 • Public • Published

Create Html Elements With Javascript Object

Create HTML elements with Javascript Object easily.

EXAMPLE

HTML:

<div id="append-here"></div>

JAVASCRIPT:

document.getElementById('append-here').cewo([
    {
        'tag': 'div',
        'atts': {
            'class': 'test',
            'id': 'example'
        },
        'child': [
            {
                'tag': 'button',
                'atts': {
                    'type': 'button'
                },
                'html': 'Click me!',
                'script': {
                    'load': function(event) {
                        console.log('Button element created');
                    },
                    // You can use all Event Listeners
                    'click': function(event) {
                        document.getElementById('response').cewo([
                            {
                                'tag': 'div',
                                'html': 'test'
                            }
                        ]);
                    }
                }
            }
        ]
    },
    {
        'tag': 'div',
        'atts': {
            'id': 'response'
        },
        'script': {
            'load': function(event) {
                console.log('Response element created');
            }
        }
    },
    {
        'tag': 'div',
        'child': [
            {
                'tag': 'span',
                'child': [
                    {
                        'tag': 'ul',
                        'child': [
                            {
                                'tag': 'li',
                                'html': 'q'
                            }
                        ]
                    }
                ]
            }
        ]
    }
]);

RESULT:

<div id="append-here">
    <div class="test" id="example">
        <button type="button">Click me!</button>
    </div>
    <div id="response"></div>
    <div>
        <span>
            <ul>
                <li>q</li>
            </ul>
        </span>
    </div>
</div>

Package Sidebar

Install

npm i create-html-elements-with-javascript-object

Weekly Downloads

1

Version

1.0.4

License

MIT

Unpacked Size

5.06 kB

Total Files

4

Last publish

Collaborators

  • zulkarneynyavas