为什么我使用 Javascript innerHTML 调用时我的图像不显示？答案

【问题标题】：Why does my image not show up when I use Javascript innerHTML to call it?为什么我使用 Javascript innerHTML 调用时我的图像不显示？
【发布时间】：2012-03-20 10:25:44
【问题描述】：

我对 Javascript 很陌生，我正在尝试一些东西。我正在使用一个函数来使用innerHTML 在表格中加载图像。但是图像不会显示，除非我在函数底部调用 alert("whatever") ，否则它会在警报可见时显示。我正在使用的代码类似于（从外部 js 文件调用该函数）

<script>
   function show(){
        document.getElementById('imageHolder1').innerHTML="<a href="#"><img='photos/picture.jpg' border=0/></a>";
    }
</script>

<body> <input name="b1" type="button" value="pics" onclick="show()"/>
<table><td id='imageHolder1'>picture</td></table>
</body> ``

我不明白为什么它不起作用，我看过的所有例子都是相似的，我看不出有什么大的区别。即使我尝试不带标签它也不起作用。欢迎任何帮助！在此先感谢您，如果您对如何执行此操作有任何建议（没有 jquery，因为我仍在学习 javascript），我也将不胜感激。再次感谢！

【问题讨论】：

检查#，你需要在你的innerHTML字符串中转义"。innerHTML是一个可以使用的野兽，因为你必须确保你插入的所有内容都是真实和好的HTML。可能想要研究更冗长但更值得信赖的 DOM 操作 javascript，例如 appendChild 等。
另外，我建议您使用类似 FF 的 firebug 或其他 JavaScript 调试器，因为这些错误更容易发现。
谢谢，我将尝试 appendChild，并最终查看 Javascript 调试器，因为这个示例似乎无法正常工作。

标签： javascript image innerhtml

【解决方案1】：

您的字符串中有错误：

document.getElementById('imageHolder1').innerHTML="<a href="#"><img='photos/picture.jpg' border=0/></a>";

应该阅读

document.getElementById('imageHolder1').innerHTML="<a href='#'><img src='photos/picture.jpg' border=0/></a>";

(注意"要'替换)

【讨论】：

这一定是一个糟糕的剪切粘贴，否则会产生一个语法错误
是的，我在粘贴时删除了src

【解决方案2】：

您的代码中有很多错误和懒惰的快捷方式。我做了一个小提琴，不得不纠正很多看起来很仓促的地方......这是你的小提琴，但要投入一些精力：http://jsfiddle.net/uXpeK/

【讨论】：

非常感谢您抽出宝贵时间来做这件事！我想这与放入重要属性有关。

【解决方案3】：

您没有添加图像 src。应该是href='#'应该是这样的

function show(){
     document.getElementById('imageHolder1').innerHTML="<a href='#'><img src='photos/picture.jpg' border='0'/></a>";
}

【讨论】：

【解决方案4】：

尝试给图像一个 'image' 的 id，然后使用以下内容：

function show(){
    document.getElementById('image').src = 'photos/picture.jpg'
}

【讨论】：