Question

我想使用innerHTML显示图像，但似乎无法正常工作。它可以很好地处理文本，并且我正在尝试使其与innerHTML中的其他项一起动态显示。更新：图像在innerHTML中的另一个元素内。图片示例：

    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>

Answer 1

innerHtml用于将字符串解析为HTML代码。

要将图像附加到DOM元素，请使用：

div.appendChild(image);

Answer 2

在图片上使用.appendChild()使其成为div的子元素，而不是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>

有关两者的区别，请参见"innerHTML += ..." vs "appendChild(txtNode)"

Answer 3

推荐的添加图像的方法是通过appendChild()，但是要按照您要求的方式添加图像元素，您需要根据图像的HTML标签和属性将其指定为html，如下：

    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>

Answer 4

使用此代码而不是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);

Answer 5

您需要使用appendChild而不是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>

Answer 6

您可以更改此行 div.innerHTML = image;

对此： div.innerHTML = image.outerHTML;

您正在将innerHTML设置为当前的对象，而不是html。

图片未显示在innerHTML内部

6 个答案: