表格中insertBefore方法的使用（The node before which the new node is to be inserted is not a child of this no）

在写表格字母排序案例中，使用到了insertBefore()方法

insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

node.insertBefore(newnode,existingnode)

newnode	节点对象	必须。要插入的节点对象
existingnode	节点对象	必须。要添加新的节点前的子节点。

案例

问题

//点击按钮调用sortTable()方法
function sortTable(){
    var table = document.getElementById("myTable");

    var trs = table.getElementsByTagName("tr");
    var a,b;
    for(a = 1;a < trs.length - 1;a++){
        for(i = 1;i < trs.length - 1 - a;i++){
            var prev = trs[i].getElementsByTagName("td")[0];
            var next = trs[i+1].getElementsByTagName("td")[0];
            // console.log(prev.innerHTML);
            // console.log(next.innerHTML);
            if(prev.innerHTML.toUpperCase() > next.innerHTML.toUpperCase()){
            
     			//插入节点
                table.insertBefore(trs[i+1],trs[i]);
                
            }
        }
    }
}

使用table调用insertBefore()方法插入节点，但是控制台报错


我心想table不就是tr的父节点吗

<table border="1" id="myTable">
        <tr>
            <th>Name</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
        </tr>
        <tr>
            <td>North/South</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Italy</td>
        </tr>
        <tr>
            <td>Paris specialites</td>
            <td>France</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Canada</td>
        </tr>
    </table>

还是把父节点打印出来,用parentNode()方法获取父节点

function sortTable(){
    var table = document.getElementById("myTable");

    var trs = table.getElementsByTagName("tr");
    console.log(trs[1].parentNode);
    console.log(trs[1].parentNode.parentNode);
    var a,b;
}

发现tr的父节点是tbody

tbody 标签用于组合 HTML 表格的主体内容。

tbody 元素应该与 and 元素结合起来使用，用来规定表格的各个部分（主体、表头、页脚）。

解决

将table调用改为 trs[i].parentNode 调用

function sortTable(){
    var table = document.getElementById("myTable");
    var trs = table.getElementsByTagName("tr");
    console.log(trs[1].parentNode);
    console.log(trs[1].parentNode.parentNode);
    var a,b;
    for(a = 1;a < trs.length - 1;a++){
        for(i = 1;i < trs.length - 1 - a;i++){
            var prev = trs[i].getElementsByTagName("td")[0];
            var next = trs[i+1].getElementsByTagName("td")[0];
            // console.log(prev.innerHTML);
            // console.log(next.innerHTML);
            if(prev.innerHTML.toUpperCase() > next.innerHTML.toUpperCase()){
                trs[i].parentNode.insertBefore(trs[i+1],trs[i]);
                // table.insertBefore(trs[i+1],trs[i]);
            }
        }
    }
}

重新点击排序

成功排序