HTML中动态添加节点的两种方法

方法一、

<script>

function AddNode(name,size,picpath,id)
{

      var   s=document.createElement( 'span ');

      s.innerHTML = ' <DIV   id=skirt01   style= "Z-INDEX:   2;   LEFT:   375px;   WIDTH:   60px;   POSITION:   absolute;   TOP:   455px;   HEIGHT:   67px "> <A   οndblclick= "MM_timelineGoto(\ 'skirt01\ ',\ '10\ ') "   > <IMG   οnmοuseοver= "MM_showHideLayers(\ 'skirt1w\ ',\ '\ ',\ 'show\ ') "   οnclick= "MM_timelineGoto(\ 'skirt01\ ',\ '5\ ') "   οnmοuseοut= "MM_showHideLayers(\ 'skirt1w\ ',\ '\ ',\ 'hide\ ') "   height=150   src= "1.jpg "   width=107   border=0> </A> </DIV> ';

     document.body.appendChild(s);

}

</script>

 

方法二：麻烦一些，各个父子控件之间都要appendChild一次。

<script>

function AddNode(name,size,picpath,id)
   {
                var myElement = document.createElement('li');
                myElement.style.width="150px";
                myElement.style.height="324px";
                document.getElementById("imgid").appendChild(myElement);
               
                //div
                var div1 = document.createElement('div');
                div1.id="themeid";
                div1.style.width="150px";
                div1.style.height="300px";
                myElement.appendChild(div1);
               
               
                var span1 = document.createElement('span');
                span1.className="cap_td";
                span1.style.height="24px";
                span1.title=name;   //鼠标置于其上后的提示语
                span1.innerHTML=name;
                div1.appendChild(span1);
               
                var br1 = document.createElement('br');
                 div1.appendChild(br1);
               
                var span2 = document.createElement('span');
                span2.className="wgt_td";
                span2.style.height="24px";
                span2.innerHTML=size;   //主题包的大小
                div1.appendChild(span2);
               
                var img1 = document.createElement('img');
                img1.className="imgShow";
                img1.src=picpath;       //预览图路径
                img1.title="新主题图片";//此处显示主题详细提示信息，暂无
                img1.id=id;             //ID
                img1.οnmοusedοwn=function()
      {
        alert("ClinkMouseBtnDown");
       if (event.button == 1) 
       {
        select_when_left_mousekey_down(id);
         external.OnLBottondownFunc();
        }
      }
                div1.appendChild(img1);
               
               
                //复选框
               var chkbox = document.createElement('input');
               chkbox.type="checkbox";
               chkbox.style.height="24px";
               chkbox.id=id;  
               chkbox.className="checkbox_cls";
               myElement.appendChild(chkbox);
            }

    </script>