appendChild()

parent.appendChild(childNode)
// parent element노드에 자식노드를 삽입한다. 이 노드는 자식노드중 마지막에 위치한다.
parent.insertBefore(childNode, parent.childeNodes[n])
// appendChild와 비슷하지만 원하는 위치에 삽입가능하다. 위치는 두번째 인자의 앞이다.
// 두번째 인자가 null이면 appendChild와 똑같이 작동한다.

appendChild()나 insertBefore()를 호출하면, 해당노드는 자동으로 원래 위치에서 제거되고 새 위치에 삽입된다.

아래는 이러한 성질?을 이용해서 table의 값을 정렬하는 함수다.

var sortrows = (table, n) => {
    console.log("sortrows");
    let tbody = table.tBodies[0],
        rows = tbody.getElementsByTagName("tr");

    rows = Array.prototype.slice.call(rows, 0);

    rows.sort((row1, row2) => {
        let cell1 = row1.getElementsByTagName("td")[n],        
            cell2 = row2.getElementsByTagName("td")[n];

        let val1 = cell1.textContent,
            val2 = cell2.textContent;

        if(val1 < val2){
          return -1
        }else if(val1 > val2){
          return 1
        }else{
          return 0
        }
    });

    for (var i = 0; i < rows.length; i++) {
        tbody.appendChild(rows[i]);
    }
}

var makeSortable = (table) => {
  console.log("makeSortable");
    let headers = table.getElementsByTagName("th");
    for (let i = 0; i < headers.length; i++) {
      ((n) => {
          headers[i].onclick = () => { sortrows(table, n); }
      })(i);
    }
}

const t = document.getElementById("table");
makeSortable(t);