我在使用以下 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();
标记进行转义,但没有成功...如何解决此问题?
最佳答案
这是正确转义的结果:
<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>
关于javascript - SyntaxError : expected expression, 得到 '<' 尝试转义但不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33931531/