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   ;

     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>