将 Javascript 对象添加到 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.

Answer 1

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

Answer 2

You should use DOM manipulation methods. Eg

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

Answer 3

I think you need to use:

otherObject.appendChild(img);

Answer 4

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

Answer 5

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

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