Create DOM element from Object in javascript

Question

Hi I'm trying to understand how to make Dom elemnt, let's say "div" form my data Object. I've made an object like this:

var div = {

        style : {
            width: Math.floor(Math.random() * 100),
            height: Math.floor(Math.random() * 100),
            position: "relative",
            top:Math.floor(Math.random()*500)
        },

        sayHi: function () {
            alert("Hello");
        },

    }

What I need to do now, is to make it live element in DOM with these css params? Thank you

Answer 1

To create a DOM element, you use document.createElement, like this:

var elm = document.createElement('div');

That elm will already have a property called style; you can then assign to its members, e.g.:

elm.style.width = div.style.width + "px"; // Remember this is CSS, you need units

A for..in loop on your div.style might be useful there, but do be sure to handle the units thing.

To attach event handlers to it, you can do the old DOM0 thing of assigning to onXyz properties, like this:

elm.onclick = div.sayHi;

...which will make it run the sayHi function on click, but a more modern way is via addEventListener:

elm.addEventListener('click', div.sayHi, false);

Older versions of IE don't have addEventListener, but they do have its MS-only predecessor, attachEvent:

elm.attachEvent('onclick', div.sayHi);

Note the difference in the event name, and it doesn't have the third argument.

All of this is academic unless you add elm to the page somewhere. :-) You can do that by getting a reference to another element on the page, and then calling appendChild:

someOtherElement.appendChild(elm);

More to explore:

• DOM2 Core
• DOM2 HTML
• DOM3 Core
• HTML5 Web Application APIs

---

Because of things like the addEventListener / attachEvent browser incompatibility and various other small things, and because they offer a lot of pre-packaged utility functionality, a lot of people (including me) use a JavaScript library like jQuery, YUI, Closure, or any of several others to help with this stuff.

Answer 2

Try this

var DOMdiv = document.createElement("div");
for(var key in div) {
    if(key === "style") {
        for(var cssstyle in div[key]) {
            DOMdiv.style[cssstyle] = div[key][cssstyle];
        }
    } else {
        DOMdiv[key] = div[key];
    }
}
document.body.appendChild(DOMdiv);

But keep in mind that this Div has now a function called sayHi() attached to it. There is no eventhandler initiated or whatsoever. If you like to have some eventhandlers, change your object like that:

var div = {

     [...]


     onclick: function() {
         alert("Hi");
     }

 };