Question

我试图弄清楚它为什么用于文本而不用于图像。当我尝试在这里显示＆＃34;一些文字＆＃34;而不是具有id图像框的div中的图像标签，它可以工作。理论上我应该能够使用innerHTML插入图像

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "jumai.css">
<link rel = "stylesheet" href = "bootstrap.css">
</head>

<body>
<div class = "container">

<div class = "col-md-2">
<p> Some text here </p>
</div>

<div class = "col-md-8">
<div class = "middlemenu">
<ul class = "list"> 
<li> <button type = "button" class = "btn btn-default" onclick= 
"myfunction()">  BESTSELLER BRANDS </button> </li>
<li> <button type = "button" class = "btn btn-default">TRENDING NOW 
</button> 
</li>
<li> <button type = "button" class = "btn btn-default">SHOP NAIJA BRANDS 
</button> </li>
</ul>

</div>

<div id = "imagebox" >



</div>
</div>

<div class = "col-md-2">

<p> sOME TEST HERE </p>
</div>

</div>


<script>

function myfunction(){
document.getElementById('imagebox').innerHTML = 
" <img src = "infinix.png" alt = "infinix">";
} 
</script>
</body>

</html>

Answer 1

innerHtml 主要用于获取和设置html元素的内容，而显示图片则需要<img>元素本身。两者都是不同的场景。

首先，您要设置一些内容，例如您通过设置innerhtml文本内容看到的文字。

在其他情况下，您正在尝试分配一种对象。

如果你想使用javascript或jQuery插入图片，你可以通过附加一个<img>元素本身为＆＃34; imagebox＆＃34;。

的孩子来做到这一点。

Answer 2

<script>

function myfunction(){
document.getElementById('imagebox').innerHTML = 
" <img src = \"infinix.png\" alt = \"infinix\">";
} 
</script>

只需在“之前添加\”以便它能正常工作

Answer 3

您的代码无效，因为2个问题，首先，您不能使用相同的引号来设置innerHTML的值并在值内再次使用，您需要使用不同的引号。

例如，"和src中的alt与innerHTML值"的开头相同：

document.getElementById('imagebox').innerHTML = " <img src = "https://dummyimage.com/200x100/000/fff" alt = "infinix">";

正确的方法是将"用于innerHTML，将'用于src和alt，如下所示：

document.getElementById('imagebox').innerHTML = " <img src = 'https://dummyimage.com/200x100/000/fff' alt = 'infinix'>";

解决这个问题，需要调用函数，在代码中只定义，但不使用。只需在代码下方添加myFunction()即可。

例如：

function myfunction(){

... stuff ...

} 

//Launch the function
myfunction();

有一个工作示例：https://jsfiddle.net/46dstzob/

使用javascript innerHTML单击按钮时插入html图像

3 个答案: