获取数据(图片)插入到指定位置div或span中

 现在要把指定的资源,如图片hao.jpg 插入到指定的位置<span>中显示

<span  id="sp" style="float: left; width: 300px; height: 200px; border: 1px solid #00BFFF;  ;"></span>
<img id="img" style="width: 300px; height: 200px; display: none;"  src="../image/hao.jpg"/>

window.onload=function() {
	//这种匿名写法,必须确保页面加载完
  document.getElementById("sp").onclick=function() {
	var img = document.getElementById("img");
	this.innerHTML="<img width='100%' height='100%' src='"+img.src+"'><img>";
  }
}

 

小结: 其实一般的获取元素都简单,唯一需要注意的是 this.innerHTML= img.src; 的话,显示的是字符串路径。所以,我们要利用浏览器对标签的解析来把 字符串路径 进行包装。也就是说,要把相应的路径赋值给指定元素的属性,如img元素的 src属性。这样的话,获取数据,插入到指定位置的操作问题,就OK了。

额外,再说句, innerHTML 这个标签属性很好用,可以省去好多代码量。