避免使用html（）替换现有元素

Question

我正在使用.html（）方法将多个图像添加到div中。

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

但它取代了div的现有元素并添加了新的图像/内容。

如何添加图像而不是替换已存在的元素？

Answer 1

使用.append()/.prepend()的地方：

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

甚至你想和.html()一起使用它然后你必须在替换之前与旧的html连接：

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

Answer 2

改为使用append()。

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

Answer 3

您需要append() HTML。

喜欢这个。

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

Answer 4

在简单的JS中

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

jQuery当然对于如何做一些非常标准的事情有着令人困惑的怪癖（它可能也有一个较短的版本，我不知道，我试图避免它）

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

Answer 5

试试append

除非你真的知道你在做什么，小心使用html（＆＃34;＆＃34;）（不是html（））