乐趣区

JS原生循环生成元素

根据一个数组,在页面加载时循环生成相似的元素

<li>
                <a href="http://reference.XXX.xin/">
                    <img  alt="XXX" src="images/gitbook.png" />
                </a>
                <p>
                    <span>XXX</span>
                    <a href="http://reference.XXX.xin/"></a>
                </p>
</li>

js 文件中写法

window.onload = function ()
{var focus_Box=document.getElementById("ul");
    var projectList=[
    {
        address:'http://www.xiexianbo.xin/',
        title:'移动互联网实验室前端网站',
        picName:'images/xiexianbo.jpg',// 静态图片路径
    },
    {
        address:'http://reference.xiexianbo.xin/',
        title:'前端知识库',
        picName:'images/gitbook.png',
    },
    {
        address:'http://120.79.79.93:9005/user/login',
        title:'四川省教育综合改革试点项目管理系统',
        picName:'images/Education.jpg',
    },
    ];
    
       var content = "";
        for (var i = 0; i < projectList.length; i++) {
            content += "<li>";
            content += "<a href=  \""+projectList[i].address+"\"  target= \"view_window\" >";
             content += "<img src=\""+projectList[i].picName+"\" alt=\""+projectList[i].title+"\">";
            content += "</a>";
            content += "<p>";
            content += "<span  innerText=\""+projectList[i].title+"\">";
            content += "<a href=  \""+projectList[i].address+"\" </a>";
            content += "</p>";
            content += "</li>";
        }
    focus_Box.innerHTML=content;
    
    new ZoomPic("focus_Box");
    
};

body 中的写法

<body>
    <div id="focus_Box">
        <ul id='ul'>
        </ul>
    </div>
</body>
退出移动版