避免 html() 替换现有元素 [重复]答案

【问题标题】：Avoid html() replace existing elements [duplicate]避免 html() 替换现有元素 [重复]
【发布时间】：2015-12-11 07:40:21
【问题描述】：

我正在使用 .html() 方法将多个图像添加到一个 div。

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

但它会替换 div 的现有元素并添加新的图像/内容。

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

【问题讨论】：

【解决方案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);

【讨论】：

【解决方案2】：

请改用append()。

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

【讨论】：

【解决方案3】：

您需要append() HTML。

像这样。

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

【讨论】：

【解决方案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' )

【讨论】：

【解决方案5】：

试试append

除非你真的知道你在做什么，否则小心使用 html("")(not html())

【讨论】：