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

文章目录

insertBefore()
案例
问题
解决

在写表格字母排序案例中，使用到了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]);}}}
}

重新点击排序
排序成功
成功排序