日期:2014-05-16 浏览次数:20317 次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function test(){ var ul = document.createElement('ul'); var li = document.getElementsByTagName('li'); for(var i=0; i< li.length; i++){ alert(li.length); ul.appendChild(li[i]); } document.body.appendChild(ul); } </script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <input type="button" onclick="test()" /> </body> </html>
function test(){ var ul = document.createElement('ul'); var li = document.getElementsByTagName('li'); for(var i=li.length - 1; i>=0 ; i--){ ul.appendChild(li[i]); } document.body.appendChild(ul); }
------解决方案--------------------
因为你是从页面上取的li标签,然后append到ul上的,所以你每次append到ul上时,页面li节点就会少一个,li.length也会减少。第一次是将li[0]append到ul(也就是将1加到ul里了),i变为1,li.length也减少为2个了,这时页面上只有两个li节点了,排列顺序还是从0开始的,所以当i变为1时,只能取值为3的li节点,如果想要得到所有li节点,可以这样修改程序:
function test(){
var ul = document.createElement('ul');
var li = document.getElementsByTagName('li');
var l = li.length;
for(var i=0; i<l; i++){
// alert(li.length);
ul.appendChild(li[0]);
}
document.body.appendChild(ul);
}