关于appendChild是附加还是替换功能的问题？

//为什么直接替换之前的列表（变成了按第一列排序好的列表），而不是将元素加在原列表的末尾？
otable.tBodies[0].appendChild(arr[i]);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="btn" type="button" value="排序">
    <table id="otable" border="1" cellspacing="0" cellpadding="10" width="100%">
        <thead>
            <td>ID</td>
            <td>name</td>
            <td>year</td>
        </thead>
        <tbody>
        <tr>
            <td>1</td><td>z</td><td>12</td>
        </tr>
        <tr>
            <td>2</td><td>zhangsan</td><td>2</td>
        </tr>
        <tr>
            <td>6</td><td>lc</td><td>22</td>
        </tr>
        <tr>
            <td>4</td><td>l1yc</td><td>02</td>
        </tr>
        <tr>
            <td>5</td><td>l5yc</td><td>112</td>
        </tr>
        </tbody>
    </table>
<script>
        //排序功能
 btn.onclick=function () {
            var otable=document.getElementById("otable");
 var btn=document.getElementById("btn");

 var arr=[];
 for(var i=0;i<otable.tBodies[0].rows.length;i++){
                arr[i]=otable.tBodies[0].rows[i];//每行
 }
            arr.sort(function (tr1,tr2) {
                var n1=parseInt(tr1.cells[0].innerHTML);
 var n2=parseInt(tr2.cells[0].innerHTML);
 return n1-n2;
 });
 console.log(arr);
 for(var i=0;i<arr.length;i++){
                //为什么直接替换之前的列表（变成了按第一列排序好的列表），而不是将元素加在原列表的末尾？
     otable.tBodies[0].appendChild(arr[i]);
 }
        };
</script>
</body>
</html>

烟火里

浏览 2784回答 3

3回答

慕的地8582982

NJTZVYFAQHYLTMGKPGWMEFRORGDRHFVJOWMZQUZKWGXRAADBVRXOMDKIMFMQVMTZYVHWRXVMSKAICJMGQKOWDDRRXURGAVCTSALYISFGGHPFMWTJXICNUBHQRHYSKELVSSTUJGJKAXUBRFJVLLTNNKBBYSRJJZDXURRZZIVHIGWNBBZZDZJTXSLOVNEHOSPQQXYVDXGDCVVMSKHCUFVLVZOVFWIPLSYUPHPFFTVNQUKLFVVMTUYVICIQHIYEBKAOWMXLVOWGXADDTGGQZASVVCCJDAMJGXWCZZJKECZWTTXKAHHASVZDWQIVMCECPSTGFADNZMMWWXRUQUPIPSUULOIBIYFCFFCVIMVSDUSBEDRUQLNFLLJMNBSLYPXDXHANERDNXAGJNMTQMMFAGKHBDAXHHZZAEEXRLOLDCOOELXGUCRGKYYMNXTLSRFMHHGITDJCALXCPDNKLFKEXTZASFDTNBNFHBTAYFZRPKGXXEFJBLSPAHKBBWEXEEFUAHNYSZCEOSYJMCMZZGGTGADULJJCXGKYZWCCCDTGTFZTEBUVIBCJZHJJTAWDUHUYVTGTAGNKOVMTALDKORZCFHKSVOMFOVYYYMKXQSSMZIOFJSZVMMMZRAEUOREULVSVOCSROQESPCWYMXFSTEBZTGGQEFCDZAXDHSFMRUQUYZSMYZTNDYYYZAUQOPTFAOYSGWZXEXILEJEXDNPCOKBLPQPMWKKHDAAHKURKXLEDJAYEHBLBEVGFIRRCIPCTTWYPWHBEHXOKADHQJKENIVGIEFZVELFYWNGICQJRKKROXPISFGNSVYFAPEFVBYPYUIDPBFFYIGSPPJODDCFLRKNEDXTTWPIFAUOFKXREFEIERLAQMWLEOUBRC

0 0

随时随地看视频慕课网APP