js动态添加子节点

来源:互联网 发布:淘宝封店支付宝还能用 编辑:程序博客网 时间:2024/05/16 14:16
function addElement_pic(i,imgsrc,website,landingPage){//获得ulvar ul = document.getElementById("hot_web_pic");//创建livar li = document.createElement("li");//给li设置属性    li.setAttribute("class", "fl limar");  li.setAttribute("id", "liid"+i);  //添加子节点li    ul.appendChild(li);    //获得当前添加的li     var newli =  document.getElementById("liid"+i);    //在添加的li中创建子节点div    var div = document.createElement("div");    //给子节点div设置属性    div.setAttribute("id", "divid"+i);    //创建子节点    newli.appendChild(div);    var newdiv =  document.getElementById("divid"+i);    //给div设置div    document.getElementById("divid"+i).style.width="58px";    document.getElementById("divid"+i).style.height="59px";    //创建子节点img    var img = document.createElement("img");    //给img设置属性    img.src = imgsrc;    //添加子节点    newdiv.appendChild(img);    //创建子节点p    var textp = document.createElement("p");    textp.innerHTML = website;    newdiv.appendChild(textp);    newdiv.onclick=function(){//给p标签添加onclick事件    window.open(landingPage);    };}

原创粉丝点击