通过js动态创建标签,并设置属性

       当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了。这个时候就需要通过js动态创建标签:

    1.创建某个标签:如下在body中创建一个div的事例;

      <script>

         function fun(){

             var frameDiv = document.createElement("div");//创建一个标签

             var bodyFa = document.getElementById("bodyid");//通过id号获取frameDiv 的父类(也就是上一级的节点)

             bodyFa .appendChild(frameDiv);//把创建的节点frameDiv 添加到父类body 中;

         }

      <script>

       <body id="bodyid" >
            <!--在此添加div标签-->
       </body>

    2.添加属性:给创建的标签添加相应的属性:

       frameDiv .setAttribute("id", "divid");//给创建的div设置id值;

       frameDiv .className="divclass"; //给创建的div设置class;

      //给某个标签添加显示的值;

      var h = document.createElement("h1");
      h.innerHTML = data[i].name;

      var p = document.createElement("p");
      p.innerHTML = "要显示的值";

  

   3.创建的标签添加事件:

       a.不带参数:

       frameDiv.onmousedown = fun;  //ps:函数名fun后面一定不能带括号,否则会在创建标签的时候执行函数, 而不是鼠标按下时执行;

       b.有参数:

       frameDiv.onmousedown = function(){ fun(this); }

      c.要调用的函数;

       function fun(){
            alert("鼠标按下");
        }

   4.如果担心创建的标签没有被覆盖则可以替换:

       var divFlag = document.getElementById("divFlag");
       var divMain = document.createElement("div");
       if(divFlag != null){
               body.replaceChild(divMain, divFlag);//把原来的替换掉
        }
        divMain.setAttribute("id", "divFlag");


     

     

           

  • 5
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值