点击按钮时如何创建一个IMG？

Question

现在我有这个：

<script>
 function load() { 
 var el = document.getElementById('load');
 el.innerHTML='<img src=\"load.png\">'; }
</script>

并且HTML：

<input type="submit" onclick="javascript:load();"> 
<span id="load"> </span>

但这并不起作用，因为我可能不能在el.innerHTML=''中放置<和>。有人知道替代方法吗？谢谢！

- user1649795

---

你的脚本在我的chrome浏览器中运作正常，可以参考这个fiddle。 - Michal Klouda

请在以下网址找到代码：http://jsfiddle.net/umUnn/ - Ashish Kasma

请查看document对象的createElement函数，例如document.createElement("img")。请参阅此问题的OP https://dev59.com/SnVC5IYBdhLWcg3wpS3f。 - cbayram

Answer 1

“innerHTML”的整个关键在于可以在其中使用<和>。你的某些引号是无意义的转义，而且还有一个模仿 label 的无用的javascript:，但这个脚本能够运行。

它可能看起来像是失败了，因为表格提交并且浏览器在图像加载前离开了页面。

- Quentin

---

那我应该怎么写呢？转义是因为我一开始没有写一个函数，而是在onClick中直接写了所有内容。 - user1649795

Answer 2

使用jQuery！

<button id="button">Click</button>

$(document).ready(function(){
    $("#button").click(function(){
        $("#load").append("<img src='\load.png\'/>");
    });
});

- pmandell

Answer 3

你应该使用 createElement() 方法创建元素，然后将其附加到容器中：

var el = document.getElementById('load');
var img = document.createElement('img');
img.src = 'test.png';
el.appendChild(img);
alert(el.innerHTML);

请查看此演示。

- Michal Klouda

Answer 4

你可以尝试这个：

javascript:

 function showImage(){
     document.getElementById('load').style.display = 'block';
  }

HTML：

 <input type="submit" onclick="showImage();">
 <span id="load" style="display:none;"><img src="load.png"></span>

- Maxim VA

---

HTML也是无效的。你不应该用\转义"。 - Quentin

严肃地说，我只是从问题中给出的 JavaScript 代码行中复制了那一行。该死。 - Maxim VA

虽然这是解决问题的不同方法...但您还没有解释为什么以这种方式进行操作比问题中的版本更有益。 - Quentin

但那样不起作用。我刚写了一些能够运行的代码，如果其他人知道得更好，就像你一样，他们可以提供更好的解决方案。 - Maxim VA