使用JavaScript來移動節點

我有一張表格，結構如下。由於我無法改變HTML的創建方式，但我可以通過JavaScript添加一些我想要解決的問題。使用JavaScript來移動節點

我想要的是：
（1）表中得到一個額外的<thead>元素
（2）firstline類<tr>元素成爲<thead>

<table> 
    <tbody> 
    <tr class= firstline > 
     <th> 1st column </th> 
     <th> 2nd column </th> 
    </tr> 
    <tr class= content > 
     <th> foo </th> 
     <th> bat </th> 
    </tr> 
    </tbody> 
</table>

孩子到目前爲止，我設法刪除<tr class= firstline >元素，並且設法將<thead>元素添加到表格中。但我不知道如何將<tr class= firstline >插入<thead> ???

var firstLines = document.getElementsByClassName("firstline"); 
for (var i=0; i<firstLines.length; i++) { 
     var FLparent = firstLines[i].parentNode.parentNode; 
     var tbody = document.createElement("thead") ; 
     FLparent.insertBefore(tbody, FLparent.firstChild); 
     FLparent.firstChild.appendChild(firstLines[i]); 
     firstLines[i].parentNode.removeChild(firstLines[i]); 
}

來源

2014-02-05 petermeissner

它可以是簡單：

var 
    table = document.querySelector('table'), 
    tHead = table.insertBefore(document.createElement('thead'), table.firstChild); 

tHead.appendChild(
    table.querySelector('tr.firstline') 
);

http://jsbin.com/ruza/3/

來源

2014-02-05 15:24:16 Yoshi

它調整到我的具體情況：''VAR firstLines = document.getElementsByClassName（「FIRSTLINE」）;對於（var i = 0; i petermeissner

有一個問題：爲什麼我做筆記必須刪除節點？ – petermeissner

@marvin_dpr，因爲如果將一個節點追加到另一個父節點，那麼您正在移動該特定節點。沒有必要事先刪除它。 – Yoshi

使用JavaScript來移動節點

回答

相關問題