Element, inject

Creating element. Including events during construction. Injecting into body.

by andfinally

CSS

.injected
{
    clear: both;
    border: 1px solid #ccc; 
    margin: 10px;
    padding: 10px;
    cursor: pointer;
}

JavaScript

var div = new Element('div', {
    id: 'dynamic',
    'class': 'injected',
    styles: {
        color: '#f55'
    },
    html: 'Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He\'s got style, a groovy style, and a car that just won\'t stop. When the going gets tough, he\'s really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He\'s got style, a groovy style, and a car that just won\'t stop. When the going gets tough, he\'s really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy.',
    events: {
        click: function() {
            alert('clicked');
        },
        // event is automatically passed into the function
        mouseenter: function() {
            event.target.setStyle('color', '#090');
        },
        mouseleave: function() {
            event.target.setStyle('color', '#f55');
        }
    }
});

div.inject(document.body);