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.

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.

• javascript
• object
• innerhtml

5 Answers 5

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

You should use DOM manipulation methods. E.g.

• element.appendChild ^[MDN]
• element.insertBefore ^[MDN]

I think you need to use:

otherObject.appendChild(img);

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

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

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