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

T.J. Crowder · Accepted Answer · 2012-06-07 09:52:16Z

3

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:

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.

edited Jun 7, 2012 at 9:52

answered Jun 7, 2012 at 9:45

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Florian Margaine Over a year ago

Would elm.style = div.style work? Just curious. Assuming the units are correct of course.

T.J. Crowder Over a year ago

@FlorianMargaine: I don't think so, but I'll admit I've never tried it.

Connell Over a year ago

I don't think it will. Chrome's console shows that elm.style is a 'CSSStyleDeclaration', where div.style is just an Object. I've tried using jQuery's $.extend, hoping that it'd simply fill in the properties of the style, but this didn't work :(

Amberlamps · Accepted Answer · 2012-06-07 16:24:52Z

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

 };

edited Jun 7, 2012 at 16:24

answered Jun 7, 2012 at 9:49

Amberlamps

40.7k6 gold badges46 silver badges54 bronze badges

2 Comments

Florian Margaine Over a year ago

Or use a custom event handler if you want more than one click event. Or just use jQuery™.

T.J. Crowder Over a year ago

"var DOMdiv = document.create("div");" That should be createElement, not just create.

Collectives™ on Stack Overflow

Create DOM element from Object in javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related