javascript - 单击按钮时如何创建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>

但这不起作用，因为我可能不会将<and>放在el.innerHTML=''. 有人知道替代方案吗？

TIA

Answer 1

的全部意义innerHTML在于您可以在其中使用<和使用>。您有一些毫无意义的引号转义和货物崇拜javascript: 标签，但脚本有效。

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

Answer 2

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

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

请参阅此演示。

Answer 3

使用 jQuery！

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

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

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>