ITPub博客

首页 > 应用开发 > IT综合 > h5~js~节点(7)

h5~js~节点(7)

原创 IT综合 作者:潇洒妞妞妞 时间:2016-06-26 10:14:04 0 删除 编辑

节点

动态节点的创建思路: 

1.在标签中添加事件,及 onclick="javascript:add();"方式

 

2.创建节点的过程document.createElement();样式,路径等

3. 定义事件源及getEle……Id()方式,之后把节点添加到对象之后

及对象.appendChild(a);

 

代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title></title>

       <style type=text/css>

           img{

              width: 100px;

              height:100px;

              border:1px dashed red;

             

           }

      

    </head>

    <body>

       <div id="content"></div>

       <img src="../img/01.jpg"/>

       <input type="button" value="添加节点" onclick="javascript:add();" />

      

    </body>

    <script>

       function add(){

       var q=document.createElement("img");

       q.src="../img/02.jpg";

       q.style.width="100px";

       q.style.height="100px";

       var obj=document.getElementById("content");

       obj.appendChild(q);

       }

   

    </script>

</html>

 

 


           img{

              width: 100px;

              height:100px;

              border:1px dashed red;


           }

      

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/30545764/viewspace-2121004/ ,如需转载,请注明出处,否则将追究法律责任。

下一篇: h5~js~函数(2)
请登录后发表评论 登录
全部评论

注册时间:2015-10-29

  • 博文量
    44
  • 访问量
    89173