码迷,mamicode.com
首页 > 其他好文 > 详细

添加图片的两种方式

时间:2017-06-18 18:11:01      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:append   -o   htm   元素   ddc   dom   set   pre   方式   

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

添加图片的两种方式

标签:append   -o   htm   元素   ddc   dom   set   pre   方式   

原文地址:http://www.cnblogs.com/gongxuanming/p/7044734.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!