Javascript:无法在 div 标签上加载图像资源

Question

谁能告诉我如何查看 div 标签上的实际图像资源:

这是完整的脚本:

var smileys = [];
smileys[":)"] = "happy.png";
smileys[":D"] = "laugh.png";
smileys[":3"] = "meow.png";
smileys[":{"] = "must.png";
smileys[":V"] = "pac.png";
smileys[":("] = "sad.png";
smileys[":O"] = "surprised.png";
smileys[":?"] = "wat.png";

function RegExpEscape(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

function replaceEmoticons(str) {
  for (var key in smileys) {
    var re = new RegExp("(?:^|\\s)" + RegExpEscape(key) + "(?=$|\\s)", 'g');
    var str2 = "<img src='images/smileys/" + smileys[key] + "'/>";
    //alert(re);
    //alert(str2);
    var inputName = document.getElementById("input");
    alert(inputName);
    str = str.html().replace(re, str2);
  }
  return (str);
}

var delay = (function() {
  var timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

update();

function update() {
  $('#result').text(replaceEmoticons($('#input').val()));
}

$('#input').keyup(function() {
  delay(update, 250);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4>Input :</h4>

<textarea id="input">
  Hello how are you all doing today? :)
</textarea>

<hr>
<h4>Result :</h4>

<div id="result">
</div>

当我检查元素时，在控制台上没有发现任何错误! 请协助!

Answer 1

请注意，javascript 代码在加载 DOM 之前执行。当您加载页面时，加载代码后正在执行并且 #input 尚不存在。将其放入 $(document).ready 或 onload 事件中。

 $(document).ready(function() {

      //your stuff

 });

编辑

请看那个 fiddle :https://jsfiddle.net/aoaugpaf/