Greasy Fork

Shined up real nice.

Element constructor

with this script you can create HTML-Elements

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://greasyfork.org/scripts/28186-element-constructor/code/Element%20constructor.js?version=182526

After trying this script, you can ask a question about it, review it, or report it.
Advertisement
Author
Arnie
Ratings
0 0 0
Version
0.4
Created
Updated
License
N/A
Applies to
All sites

Author's Description

Element constructor
===================
    you can create Elements how ever you want :D
    Just try it out! The script will send a message
    to the browser console if you try anything it
    can´t do. Please comment if there´s something
    wrong!
    Thank you
    
    Example
    	//div-element
		new Element();

		//simple elements
    	var tag = new Element('p');
    	var tag = new Element('div');
    	var tag = new Element('a');
    	var tag = new Element('td');
    	var tag = new Element('input');
    	var tag = new Element('hr');

        //some different instances of one element
        var tag = new Element('a', [
        	{
        		style: 'width: 100px'
        	},
        	{
        		style: 'font-size: 20px'
        	},
        	{
        		style: 'color:blue'
        	},
        	{
        		href: 'http://google.de'
        	}
        ])

        //element with attributes
    	var tag = new Element('div', {
    		style: 'width: 100px'
    	});

    	var tag = new Element('input', {
    		style: 'width: 100px',
    		value: 'test',
    		type: 'password'
    	});

	//some elements
        var tag = new Element([
        	'div',
        	'p',
        	'a',
        	'tr',
        	'td',
        	'hr',
        	'input'
        ])

        //some elements with equal attributes
        var tag = new Element([
        	'div',
        	'p',
        	'a',
        	'tr',
        	'td',
        	'hr',
        	'input'
        ], {
        	style: 'width: 100px'
        })

        //some elements (and instances) with different attributes
        var tag = new Element([
        	'div',
        	'p',
        	'a',
        	'tr',
        	'td',
        	'hr',
        	'input'
        ], [
        	{style: 'width: 100px'},
        	{style: 'font-size: 20px'},
        	{href: 'http://google.de'},
        	{style: 'font-weight: bold'},
        	{style: 'text-decoration: underline'},
        	{style: 'margin: 10px 0 5px 0'},
        	{value: 'Test'}
        ])

        //some different elements (and instances) with different instances and attributes
        var tag = new Element([
        	'div',
        	'a',
        	'input'
        ], [
			[
				{id: 'aDivElement'},
				{class: 'container'},
				{onclick: 'alert("you clicked on a div-element!")'},
				{style: 'width: 100px'},
				{style: 'width: 200px'},
				{style: 'width: 300px'},
				{style: 'width: 400px'},
				{style: 'width: 500px'}
			],
			[
				{id: 'aLink'},
				{class: 'link'},
				{onclick: 'alert("you clicked on a link!"); void(0)'},
				{href: 'http://google.de'},
				{href: 'https://google.de'},
				{href: 'http://google.com'},
				{href: 'https://google.com'},
			],
			[
				{id: 'usrname'},
				{class: 'loginInput'},
				{onclick: 'alert("please type your username")'},
				{value: 'something'},
				{value: 'something other'},
				{value: 'something other'}
			]
        ])

Share