獲取數據(圖片)插入到指定位置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 這個標籤屬性很好用,可以省去好多代碼量。