用Javascript往一个Div中插入一张图片

原创于 2012-02-24 16:25:51 发布 · 2.9w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #div #border #html5 #function

本文介绍了一种使用JavaScript将图片动态插入到HTML页面指定Div元素中的方法。通过创建img元素并设置其src属性，最终将其添加到目标Div内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5火了，JS也得炼一炼

用Javascript往一个Div中插入一张图片

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript"> 
	window.onload = function (){  
		var bigImg = document.createElement("img");		//创建一个img元素
		bigImg.src="http://www.baidu.com/img/baidu_sylogo1.gif";   //给img元素的src属性赋值
		//bigImg.width="320";  //320个像素 不用加px
		var myDiv = document.getElementById('myDiv'); //获得dom对象
		myDiv.appendChild(bigImg);  	//为dom添加子元素img
	};
</script> 
</head>
<body>
<div id="myDiv" style="border:1px solid #eee;width:320px;height:160px;"></div>
</body>
</html>