Image doesn't display inside innerHTML

up vote
2
down vote

favorite

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>

edited Nov 12 at 20:08

asked Nov 12 at 19:58

K.C.

1798

1

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

add a comment |

up vote
2
down vote

favorite

    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>

edited Nov 12 at 20:08

asked Nov 12 at 19:58

K.C.

1798

1

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

add a comment |

up vote
2
down vote

favorite

    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>

edited Nov 12 at 20:08

asked Nov 12 at 19:58

K.C.

1798

    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>

    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>

    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

edited Nov 12 at 20:08

asked Nov 12 at 19:58

K.C.

1798

edited Nov 12 at 20:08

asked Nov 12 at 19:58

K.C.

1798

edited Nov 12 at 20:08

asked Nov 12 at 19:58

K.C.

1798

asked Nov 12 at 19:58

K.C.

1798

asked Nov 12 at 19:58

K.C.

1798

1

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

add a comment |

1

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

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

add a comment |

6 Answers
6

active

oldest

votes

up vote
1
down vote

accepted

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>

answered Nov 12 at 20:02

Dacre Denny

8,1254729

add a comment |

up vote
2
down vote

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 at 20:01

rufus1530

331110

add a comment |

up vote
1
down vote

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

answered Nov 12 at 20:01

j08691

164k20188212

add a comment |

up vote
1
down vote

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

answered Nov 12 at 20:09

sonysadi

113

add a comment |

up vote
0
down vote

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>

answered Nov 12 at 20:02

Andreas

443

add a comment |

up vote
0
down vote

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 at 20:04

CamJohnson26

559725

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269247%2fimage-doesnt-display-inside-innerhtml%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

6 Answers
6

active

oldest

votes

6 Answers
6

active

oldest

votes

up vote
1
down vote

accepted

    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>

answered Nov 12 at 20:02

Dacre Denny

8,1254729

add a comment |

up vote
1
down vote

accepted

    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>

answered Nov 12 at 20:02

Dacre Denny

8,1254729

add a comment |

up vote
1
down vote

accepted

    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>

answered Nov 12 at 20:02

Dacre Denny

8,1254729

    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>

    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>

    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>

answered Nov 12 at 20:02

Dacre Denny

8,1254729

answered Nov 12 at 20:02

Dacre Denny

8,1254729

answered Nov 12 at 20:02

Dacre Denny

8,1254729

answered Nov 12 at 20:02

Dacre Denny

8,1254729

add a comment |

up vote
2
down vote

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 at 20:01

rufus1530

331110

add a comment |

up vote
2
down vote

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 at 20:01

rufus1530

331110

add a comment |

up vote
2
down vote

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 at 20:01

rufus1530

331110

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 at 20:01

rufus1530

331110

answered Nov 12 at 20:01

rufus1530

331110

answered Nov 12 at 20:01

rufus1530

331110

answered Nov 12 at 20:01

rufus1530

331110

add a comment |

up vote
1
down vote

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

answered Nov 12 at 20:01

j08691

164k20188212

add a comment |

up vote
1
down vote

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

answered Nov 12 at 20:01

j08691

164k20188212

add a comment |

up vote
1
down vote

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

answered Nov 12 at 20:01

j08691

164k20188212

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

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>

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>

answered Nov 12 at 20:01

j08691

164k20188212

answered Nov 12 at 20:01

j08691

164k20188212

answered Nov 12 at 20:01

j08691

164k20188212

answered Nov 12 at 20:01

j08691

164k20188212

add a comment |

up vote
1
down vote

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

answered Nov 12 at 20:09

sonysadi

113

add a comment |

up vote
1
down vote

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

answered Nov 12 at 20:09

sonysadi

113

add a comment |

up vote
1
down vote

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

answered Nov 12 at 20:09

sonysadi

113

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

answered Nov 12 at 20:09

sonysadi

113

answered Nov 12 at 20:09

sonysadi

113

answered Nov 12 at 20:09

sonysadi

113

answered Nov 12 at 20:09

sonysadi

113

add a comment |

up vote
0
down vote

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>

answered Nov 12 at 20:02

Andreas

443

add a comment |

up vote
0
down vote

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>

answered Nov 12 at 20:02

Andreas

443

add a comment |

up vote
0
down vote

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>

answered Nov 12 at 20:02

Andreas

443

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>

    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>

    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>

answered Nov 12 at 20:02

Andreas

443

answered Nov 12 at 20:02

Andreas

443

answered Nov 12 at 20:02

Andreas

443

answered Nov 12 at 20:02

Andreas

443

add a comment |

up vote
0
down vote

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 at 20:04

CamJohnson26

559725

add a comment |

up vote
0
down vote

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 at 20:04

CamJohnson26

559725

add a comment |

up vote
0
down vote

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 at 20:04

CamJohnson26

559725

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 at 20:04

CamJohnson26

559725

answered Nov 12 at 20:04

CamJohnson26

559725

answered Nov 12 at 20:04

CamJohnson26

559725

answered Nov 12 at 20:04

CamJohnson26

559725

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky