jquery 替换元素后出错，是怎么回事

<ul id = 'list'>
<li>花田喜事<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
<li>天涯情歌<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
<li>游山玩水<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
<li>人像摄影<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
</ul>
<input type="button" id="btn" name="btn" value="按钮" />$('#btn').live('click',function(){
var val = '';
$("li").each(function () { 
  val += $(this).text();
});
$.ajax({
url:'a.php',
type:'POST',
data:'value='+val,
dataType:'json',
timeout:1000,
success:function(e){
var x = document.getElementById("list");
var s = x.childNodes.length;
for(var j=0;j<s;j++){
x.removeChild(x.childNodes[0]);
}
var strs = new Array();
strs = e.split(" ");
alert(strs);
for(var i=0;i<strs.length;i++){
document.getElementById("list").innerHTML += "<li>"+strs[i]+"<a href='#' class='up'>"+strs[i+1]+"&nbsp;</a><a href='#' class='down'>"+strs[i+2]+"&nbsp;</a></li>";
i = i+2;
if(i+2 >= strs.length)  break;
}
}
});
});
第一次点击按钮的时候，没有问题，但是第二次点击之后就出错了，显示成花田喜事↑ ↓  天涯情歌↑ ↓ 游山玩水↑ ↓ 人像摄影↑ ↓  undefined undefined要怎么解决？

解决方案 »

  1.   

    x.removeChild(x.childNodes[0]);
    这样只删除了一个
    这样试试
    x.removeChild(x.childNodes[j]);
      

  2.   


    x.removeChild(x.childNodes[j]);  用这个得话，没办法全部删除，我试过，只能删除一半
      

  3.   

    感觉strs多个回车 或者空格 trim下
    function trim(str){  //删除左右两端的空格
    return str.replace(/(^\s*)|(\s*$)/g, "");
    }
    strs=trim(strs);
      

  4.   

    document.getElementById("list").innerHTML += "<li>"+strs[i]+"<a href='#' class='up'>"+strs[i+1]+"&nbsp;</a><a href='#' class='down'>"+strs[i+2]+"&nbsp;</a></li>";用 += 添加元素后，前面的标签都变成大写了，只有最后一个是小写，会不会是这个得问题？
      

  5.   

    刚楼主 说只能删除一半，确实有这个问题，做了个测试
    j递减没问题，即 3 2 1 0（索引） 去删除li
    j递增的话，问题就来， firebug报的错
    0
    2.html (第 29 行)
    1
    2.html (第 29 行)
    2
    2.html (第 29 行)
    Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLUListElement.removeChild]
    [在此错误处中断] 
    obj.removeChild(s[j])html的dom结构是这样的，
        天涯情歌 ↑ ↓
        人像摄影 ↑ ↓
    完全不符合
        花田喜事 ↑ ↓
        天涯情歌 ↑ ↓
        游山玩水 ↑ ↓
        人像摄影 ↑ ↓
    删除 0 1 的格式，如果删除 0 1的话，剩下的应该是
        游山玩水 ↑ ↓
        人像摄影 ↑ ↓
    ，分析了下，删除0时没问题，把 花田喜事 删除了，
    1时，看似索引是 天涯情歌，但是现在却是 游山玩水 了，说明此时索引改变了，0为 天涯情歌 ，这就说明这样删除 花田喜事 之后，索引“位移”了，自动向前跑了一位。
    2时，只剩下
    天涯情歌
    人像摄影
    此时的2是指向 人像摄影 之后的索引值，但是这个索引没有了，所以就报错了。<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    </style>
    </head>
    <body>
    <ul id = 'list'>
    <li>花田喜事<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
    <li>天涯情歌<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
    <li>游山玩水<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
    <li>人像摄影<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
    </ul>
    <script>
    function $(el){
    return typeof el == 'string' ? document.getElementById(el) : el;
    }
    var obj = $('list');
    var s = obj.getElementsByTagName('li');
    /*
    for(var len = s.length - 1, j = len; j > -1; j--){
    console.log( j )
    obj.removeChild(s[j])
    }
    */
    for(var len = s.length, j = 0; j < len; j++){
    console.log( j )
    obj.removeChild(s[j])
    }
    </script>
    </body>
    </html>
      

  6.   

    是的，用j递增删除第一个之后，索引发生了变化，所以我采用x.removeChild(x.childNodes[0]);每次都删除第一个
      

  7.   

    既然用了 dataType: 'json'到底返回的 e 是什么格式为什么还要 strs = e.split(" "); 
      

  8.   


    返回的e是一个字符串，用strs = e.split(" ");截取字符串，以便循环输出
      

  9.   

    那dataType: 'json'这样设置做什么？
      

  10.   


    不这样设置，怎么获取<li>里面的值？