JavaScript动态添加DOM元素总结

这两天开始写古代地图的GIS网站，说白了就是用古代地图的内容效仿山寨一下谷歌地图。

 

JS这东西很久没写了，有些概念也很模糊，导致完成分块拖动加载的功能就花了好多时间。

 

主要问题是出在拖动时对元素内容的动态修改上，总结下。

 

通过JS脚本动态修改DOM元素内容通常有两种方法：

 

1. 通过DOM标准接口创建元素

var newNode = document.createElement("div"); mapDiv.insertBefore(newNode, mapDiv.getElementsByTagName("div")[0]); 

 

2. 通过修改元素的innerHTML属性来改变内容

mapDiv.innerHtml += "<div class='piece' style='top:"+(i*256+parseInt(blockArray[0][0].style.top))+"px; left:"+(parseInt(blockArray[0][0].style.left)-256)+"px; background-image:url(/"assets/full_map/x="+x+"&y="+(y+i>15?y+i-16:y+i)+"&z=4.png/")'></div>";  

 

两种方法都可以改变元素的内容，但是略有不同。

 

修改innerHTML属性的话，系统会对内容进行重构，重新生成DOM元素（新的地址），即使只是在最后追加了一个元素，而DOM API操作则不会。

 

举个例子，用数组保存DIV1中的所有元素(subDiv1, subDiv2, subDiv3.......)当修改innerHTML追加一个subDivn的时候，追加完的DOM元素与数组中的不再对应了，因为重新绘制了，元素有了新的地址（数组存的仅仅是地址）。而Div1.appendChild(subDivn)之后，数组与内部元素仍然保持对应关系。

 

速度上来说的话DOM接口的速度会相对较慢，而修改innerHTML或者是write()方法会明显较快。