Image doesn't display inside innerHTML

Question

I'm wanting to get an image to display using innerHTML and I just can't seem to get it to work. It works fine with text and I'm trying to get it to display dynamically with other items inside innerHTML. Updated: the image is inside another element in the innerHTML. Image Example:

    var div = document.createElement('div');
    var image = document.createElement('img');
    image.setAttribute('src', "https://picsum.photos/200/300");/*sample pic*/
    div.innerHTML = '<a href="/"><h3>title</h3>'+ image + '</a>';
    document.getElementById('block').appendChild(div);/*work fine if appendChild(image) or text inside innerHTML*/

<div id="block">
  image
</div>

`innerHTML` takes a string, not an `HTMLElement` – Heretic Monkey Nov 12 '18 at 20:01 — Heretic Monkey, Nov 12 '18 at 20:01

score 2 · Answer 1 · answered Nov 12 '18 at 20:01

2

innerHtml is used to parse a string as HTML code.

To attach the image to the DOM element use:

div.appendChild(image);

answered Nov 12 '18 at 20:01

rufus1530

765
4
19

score 2 · Answer 2 · answered Nov 12 '18 at 20:01

Use .appendChild() on the image to make it a child of the div, instead of innerHTML:

var div = document.createElement('div');
    var image = document.createElement('img');
    image.setAttribute('src', "https://picsum.photos/200/300");/*sample pic*/
    div.appendChild(image);
    document.getElementById('block').appendChild(div);/*work fine if appendChild(image) or text inside innerHTML*/

<div id="block">
  image
</div>

See "innerHTML += ..." vs "appendChild(txtNode)" for the differences in the two

score 2 · Accepted Answer · answered Nov 12 '18 at 20:02

The recommended way of adding an image would be via appendChild(), however to add an image element in the way you require, you'd need to specify the image in terms of its HTML tag and attributes as html, as follows:

    var div = document.createElement('div');

    // Define the image tag and html directly and then apply to innerHTML in this way
    div.innerHTML = '<img src="' + "https://picsum.photos/200/300" + '" />';

    document.getElementById('block').appendChild(div);

<div id="block">
  image
</div>

score 2 · Answer 4 · answered Nov 12 '18 at 20:09

Use this code instead of innerHTML

var div = document.createElement('div');
var image = document.createElement("img");
image.setAttribute('src', "https://picsum.photos/200/300");/*sample pic*/
document.getElementById('block').appendChild(div).appendChild(image);

score 0 · Answer 5 · answered Nov 12 '18 at 20:02

you need to use appendChild instead of innerHTML:

    var div = document.createElement('div');
    var image = document.createElement('img');
    image.setAttribute('src', "https://picsum.photos/200/300");
    div.appendChild(image);
    document.getElementById('block').appendChild(div);

<div id="block">
  image
</div>

score 0 · Answer 6 · answered Nov 12 '18 at 20:04

0

You could change this line div.innerHTML = image;

To this: div.innerHTML = image.outerHTML;

You're setting the innerHTML to an object currently instead of to html.

answered Nov 12 '18 at 20:04

CamJohnson26

1,119
1
15
40

Image doesn't display inside innerHTML

6 Answers6