js 动态创建和动态添加

动态创建:根据服务器返回的数据来进行创建,本身不知道创建的数量
实例:

最终效果 :

<body id="box">
        <div>
            <ul>
                <li>
                    <a></a>
                    <span></span>
                </li>
                <li>
                    <a></a>
                    <span></span>
                </li>
                <li>
                    <a></a>
                    <span></span>
                </li>
            </ul>
        </div>
    </body>

动态添加步骤:
1,给body添加id为box
2.js动态添加步骤

<script>
        var oDiv_i = document.createElement("div");//动态创建div
        oDiv_i.setAttribute("id","odiv_l");//给div添加id名
        document.getElementById("box").appendChild(oDiv_i);//把div添加到body里

        var oUl_i = document.createElement("ul");//动态创建ul
        oUl_i.setAttribute("id","oUl_l");//给ul添加id名
        document.getElementById("odiv_l").appendChild(oUl_i);//把ul添加到div里

        function oLi(oi_a){//oi_a:动态添加不同li的id
            var oLi_i = document.createElement("li");//动态添加li
            oLi_i.setAttribute("id",oi_a);//给li添加id名
            document.getElementById("oUl_l").appendChild(oLi_i);//把li添加到ul中
            oA(oLi_i);//调用创建a标签的函数
            oSpan(oLi_i);//调用创建span标签的函数
        }
        function oA(li){
            var oA_i = document.createElement("a");//动态添加a
            oA_i.setAttribute("id","oA_l");//给a添加id名
            li.appendChild(oA_i);//把a添加到li中
        }
        function oSpan(li){
            var oSpan_i = document.createElement("span");//动态添加span
            oSpan_i.setAttribute("id","oSpan_l");//给span添加id名
            li.appendChild(oSpan_i);//把span添加到li中
        }
        /*循环遍历,创建三个li*/
        var ids=['id1','id2','id3']//创建数组,存放li的id
        for(var i=0;i<ids.length;i++){//循环遍历    
            oLi(ids[i]);//调用li函数,并且把id分别传入三个li中
        }


</script>

实现效果

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值