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

我想弄清楚它为什么对文本起作用而对图像不起作用。当我尝试显示“一些文字在这里”，而不是与ID图像框的div中的图像标签它的作品。从理论上讲，我应该能够插入使用的innerHTML使用javascript单击按钮时插入html图像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>

来源

2017-04-17 fineboy1

[链接]（http://stackoverflow.com/questions/11266104/javascripts-innerhtml-not-working-for-为什么不只是将图像添加到元素中，而不是使用innerHTML，而是可以获得div，然后appendChild与图像，让我们说element.src ='图像 - 但是与作品 - 文本）看到这个 –

/burgerking.jpg'; – TGarrett

你正在使用的代码在哪里？ – broodjetom

您的代码不工作，因为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/

来源

2017-04-17 20:56:52 TriForce

我只需要点击一个按钮时调用的函数，但引用的工作，谢谢。 – fineboy1

的innerHTML基本上是用来获取和设置HTML元素的内容的图像，同时显示的图像需要<img>元素本身。两者都是不同的情况。

首先，您通过设置innerhtml和一些文本内容来设置一些内容说你看到的文本。

在其他你试图分配一种对象。

如果您想要使用JavaScript或jQuery插入图片，您可以通过追加一个子元素来做到这一点，该子元素将是“imagebox”的元素本身。

来源

2017-04-17 19:52:26

<script> 

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

只需添加\“之前，所以它会正常工作

来源

2017-04-17 19:57:52 Osama

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

回答

相关问题