javascript - Image doesn't display inside innerHTML - Stack Overflow

admin管理员组

文章数量:1357078

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', "/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>

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>

• javascript
• html

Share Improve this question Follow edited Nov 12, 2018 at 20:08 Victoria Le asked Nov 12, 2018 at 19:58 Victoria LeVictoria Le 94011 gold badge88 silver badges2020 bronze badges 1

• 1 innerHTML takes a string, not an HTMLElement – Heretic Monkey Commented Nov 12, 2018 at 20:01

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

The remended 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>

innerHtml is used to parse a string as HTML code.

To attach the image to the DOM element use:

div.appendChild(image);

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

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

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>

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.

本文标签： javascriptImage doesn39t display inside innerHTMLStack Overflow