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

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");
     }

 };