现在要把指定的资源,如图片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 这个标签属性很好用,可以省去好多代码量。