需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<script>标签，输入js代码：$('body').append('<img src="https://www.baidu.com/img/bd_logo1.png" />')。
3、浏览器运行index.html页面，此时图片被js成功显示到页面上。
比如在一个div中显示图片<div id='img'></div>
js:
var divObj = document.getElementById("img")
divObj.innerHTML = "<img src='1.jpg' />"
你这段代码放到body里边
<script>
document.write("<img src='1.jpg'/>")
</script>
在代码里添加以下代码执行就可以了<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="" type="text/javascript"></script>
<script language="JavaScript">
<!--
function downLoadImage(imagePathURL){
//如果中间IFRAME不存在，则添加
if(!document.getElementById("_SAVEASIMAGE_TEMP_FRAME"))
jQuery('<iframe style="display:none" id="_SAVEASIMAGE_TEMP_FRAME" name="_SAVEASIMAGE_TEMP_FRAME" onload="_doSaveAsImage()"
width="0" height="0" src="about:blank"></iframe>').appendTo("body")
if(document.all._SAVEASIMAGE_TEMP_FRAME.src!=imagePathURL){
//插入图片地址，加载图片
document.all._SAVEASIMAGE_TEMP_FRAME.src = imagePathURL
}else{
//图片显示
_doSaveAsImage()
}
}
function _doSaveAsImage(){
if(document.all._SAVEASIMAGE_TEMP_FRAME.src!="about:blank")
document.frames("_SAVEASIMAGE_TEMP_FRAME").document.execCommand("SaveAs")
}
//-->
</script>
</head>
<body>
<input type="button" value="download image" onclick="downLoadImage('jpg')">
</body>
</html>
