Adding Javascript objects into innerHTML

Question

Say I create an image object like below. ( create(); is a function I wrote but I know this function works.)

var img = create("img", "images/duba.jpg");

When I try to put this image into the innerHTML of another object that's a div, I get this plain text where the image should show up:

[object HTMLImageElement]

What's the correct method to insert one object into another like this? I have to think there's a more graceful method than hard-coding the innerHTML with strings, which I've tried successfully.

SLaks · Accepted Answer · 2011-08-10 22:19:02Z

3

Call appendChild to append the DOM element to an existing element.

answered Aug 10, 2011 at 22:19

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

Comments

Felix Kling · Accepted Answer · 2011-08-10 22:19:16Z

1

You should use DOM manipulation methods. E.g.

answered Aug 10, 2011 at 22:19

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

Daveo · Accepted Answer · 2011-08-10 22:19:32Z

1

I think you need to use:

otherObject.appendChild(img);

answered Aug 10, 2011 at 22:19

Daveo

1,2252 gold badges9 silver badges16 bronze badges

Comments

Ruan Mendes · Accepted Answer · 2011-08-10 22:19:36Z

1

If you are creating an element you can't set it as a node's innerHTML, that takes a string of HTML. Just use DOM manipulation

parent.appendChild ( create("img", "images/duba.jpg") );

answered Aug 10, 2011 at 22:19

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Comments

FishBasketGordo · Accepted Answer · 2011-08-10 22:20:00Z

1

Use the appendChild method. The innerHTML property receives a string, not a DOM element.

https://developer.mozilla.org/En/DOM/Node.appendChild

answered Aug 10, 2011 at 22:20

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

Collectives™ on Stack Overflow

Adding Javascript objects into innerHTML

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related