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 ondblclick= "MM_timelineGoto(\ 'skirt01\ ',\ '10\ ') " > <IMG onmouseover= "MM_showHideLayers(\
'skirt1w\ ',\ '\ ',\ 'show\ ') " onclick= "MM_timelineGoto(\ 'skirt01\ ',\ '5\ ') " onmouseout= "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.onmousedown=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>