Avoid html() replace existing elements

Question

I'm using .html() method to add multiple images to a div.

$('#info').html('<img class="catalog/chair.jgp"/><img class="catalog/chair2.jgp"/>');

But it replaces the existing elements of the div and adds the new images/content.

How do I add the image instead of replacing the elements which already exists?

Jai · Accepted Answer · 2015-12-11T07:47:03.230

2

That's where .append()/.prepend() is used:

$('#info').append('<img class="catalog/chair.jgp"/><img class="catalog/chair2.jgp"/>');

and even you want to use it with .html() then you have to concatenate with the old html before replacing:

var $html = $('#info').html()+'<img class="catalog/chair.jgp"/><img class="catalog/chair2.jgp"/>'
$('#info').html($html);

edited Dec 11 '15 at 07:47

answered Dec 11 '15 at 07:46

Jai

74,255
12
74
103

1

That's the type of answer I was waiting for. Covers all. Thanks. +10 – Becky Dec 11 '15 at 07:47
You are welcome @Becky. – Jai Dec 11 '15 at 07:48

score 1 · Answer 2 · answered Dec 11 '15 at 07:42

1

Use append() instead.

$('#info').append('<img class="catalog/chair.jgp"/><img class="catalog/chair2.jgp"/>');

answered Dec 11 '15 at 07:42

Kristoffer Jälén

4,112
3
30
54

score 1 · Answer 3 · answered Dec 11 '15 at 07:42

1

You need to append() the HTML.

Like this.

$('#info').append('<img class="catalog/chair.jgp"/><img class="catalog/chair2.jgp"/>');

answered Dec 11 '15 at 07:42

Jia Jian Goi

1,415
3
20
31

score 0 · Answer 4 · answered Dec 11 '15 at 07:43

In plain JS

var img = document.createElement( 'img' )
img.src = 'catalog/chair.jpg'
document.getElementById( 'info' ).appendChild( img )

jQuery of course has its own confusing quirks on how to do something very standard (it probably has a shorter-hand version as well, I've no idea, I try to avoid it)

var img = $( '<img>' )
img.attr( 'src', 'catalog/chair.jpg' )
img.appendTo( '#info' )

score 0 · Answer 5 · answered Dec 11 '15 at 07:44

0

just try append

unless you really know what is your doing, careful use html("")(not html())

answered Dec 11 '15 at 07:44

JsonSong

328
2
14

Avoid html() replace existing elements

5 Answers5