js 动态创建和动态添加

86 阅读 0 评论 57 点赞

我是靠谱客的博主漂亮糖豆，最近开发中收集的这篇文章主要介绍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>