添加图片的两种方式 

<!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中去）。

posted on 2017-06-18 17:23  天空很蓝啊  阅读(768)  评论(0)  编辑  收藏  举报

导航