添加图片的两种方式
Posted 龚轩明
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了添加图片的两种方式相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>js练习 js是脚本语言直接运行在浏览器上的。</title> <script type="text/javascript"> function addcontent(){ document.getElementById("span01").innerHTML="<img src=‘pic/star-off.png‘>"; } </script> </head> <body> <span id="span01"> </span> <input type="button" value="增加图片" onclick="addcontent();"> </body> </html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js练习 js是脚本语言直接运行在浏览器上的。</title>
<script type="text/javascript">
function addpic(){
//第一步创建一个dom元素
var imgdom=document.createElement("img");
//第二步引用方法
imgdom.setAttribute("src","pic/star-on.png");
//把元素节点的值给她
document.getElementById("div1").appendChild(imgdom);
}
</script>
</head>
<body>
<div id="div1">
</div>
<input type="button" value="添加" onclick="addpic()">
</body>
</html>
总结:第一种方式添加只能添加一张图片，第二种可以添加很多张图片（先创建dom元素，然后给dom元素赋值，最后添加dom元素到div中去）。
以上是关于添加图片的两种方式的主要内容，如果未能解决你的问题，请参考以下文章