javascript - SyntaxError : expected expression, 得到 '<' 尝试转义但不起作用

Question

我在使用以下 JavaScript 时遇到问题，

<script type='text/javascript'>
var $OriginalImage = 'http://4.bp.blogspot.com/-SUwv0x4nozI/UjBwsjK1AGI/AAAAAAAAZAI/HgfzndxJ_Nk/s1600/Android+Wallpaper.jpg';
var $thumbnail = $OriginalImage.replace('s1600','s320');

document.write = '<img alt='Android Monochrome Wallpaper' class='img-responsive img-hover' src=' +$thumbnail+ '/>';
</script>

在控制台中出现错误。

我尝试过使用 document.write(); 标记进行转义，但没有成功...如何解决此问题？

Answer 1

这是正确转义的结果:

<script type='text/javascript'>
    var OriginalImage = 'http://4.bp.blogspot.com/-SUwv0x4nozI/UjBwsjK1AGI/AAAAAAAAZAI/HgfzndxJ_Nk/s1600/Android+Wallpaper.jpg';
    var thumbnail = OriginalImage.replace('s1600','s320');
    document.write('<img alt="Android Monochrome Wallpaper" class="img-responsive img-hover" src="' +thumbnail+ '"/>');
</script>

但正如 @limelights 在评论中所说，不要使用 document.write，而是使用appendChild

  var OriginalImage = 'http://4.bp.blogspot.com/-SUwv0x4nozI/UjBwsjK1AGI/AAAAAAAAZAI/HgfzndxJ_Nk/s1600/Android+Wallpaper.jpg';
  var thumbnail = OriginalImage.replace('s1600', 's320');

  var DOM_img = document.createElement("img");
  DOM_img.alt = "Android Monochrome Wallpaper";
  DOM_img.class = "img-responsive img-hover"
  DOM_img.src = thumbnail;
  document.body.appendChild(DOM_img);

或使用setAttribute:

var OriginalImage = 'http://4.bp.blogspot.com/-SUwv0x4nozI/UjBwsjK1AGI/AAAAAAAAZAI/HgfzndxJ_Nk/s1600/Android+Wallpaper.jpg';

var thumbnail = OriginalImage.replace('s1600', 's320');
var elem = document.createElement("img");
elem.setAttribute("src", thumbnail);
elem.setAttribute("class", "img-responsive img-hover");
elem.setAttribute("alt", "Android Monochrome Wallpaper");
document.body.appendChild(elem);

附加到 anchor 标记:

var OriginalImage = 'http://4.bp.blogspot.com/-SUwv0x4nozI/UjBwsjK1AGI/AAAAAAAAZAI/HgfzndxJ_Nk/s1600/Android+Wallpaper.jpg';

    var thumbnail = OriginalImage.replace('s1600', 's320');
    var elem = document.createElement("img");
    elem.setAttribute("src", thumbnail);
    elem.setAttribute("class", "img-responsive img-hover");
    elem.setAttribute("alt", "Android Monochrome Wallpaper");
    document.getElementById('addImage').appendChild(elem);

<a href="example.html" id="addImage"></a>

或没有 ID:

var OriginalImage = 'http://4.bp.blogspot.com/-SUwv0x4nozI/UjBwsjK1AGI/AAAAAAAAZAI/HgfzndxJ_Nk/s1600/Android+Wallpaper.jpg';

    var thumbnail = OriginalImage.replace('s1600', 's320');
    var elem = document.createElement("img");
    elem.setAttribute("src", thumbnail);
    elem.setAttribute("class", "img-responsive img-hover");
    elem.setAttribute("alt", "Android Monochrome Wallpaper");
    document.getElementsByTagName("a")[0].appendChild(elem);

<a href="example.html"></a>