(JS) appendChild(), insertBefore()

특정 위치 앞에 노드 삽입하기

appendChild()

자식 노드의 마지막에 노드가 삽입된다.

insertBefore()

insertBefore()는 appendChild()와 비슷하지만, 전달인자가 두 개라는 점이 다르다.
첫 번째 전달인자는 삽입하려는 노드이고, 두번째 전달인자는 삽입 기준이 되는 노드로, 새 노드는 이 앞에 놓는다. 이 메서드는 삽입할 노드의 부모 객체가 될 노드에서 실행되다. 그리고 두 번째 전달인자는 이 부모 노드의 자식 노드여야 한다.

두 번째 인자가 null이면, insertBefore()는 insertBefore()는 appendChild()처럼 작동해 자식 노드의 끝에 삽입한다.

//parent 노드에 n번째 자식 노드로 child 노드를 삽입한다. 
function insertAt(parent, child, n) {
  if(n < 0 || n > parent.childNodes.length) {
    	throw new Error("invalid index");
  } else if (n === parent.childNode.length;) {
    	parent.appendChild(child);
  } else {
  		parent.insertBefore(child, parent.childNodes[n]);
  }
}

// 각 행의 n번째 열의 값을 기준으로 진정한 테이블의 첫 번째 <tbody>의 행들을 정렬한다. 
// 하나를 지정하면, 함수 비교를 사용한다. 그렇지 않으면, 알파벳 순으로 값을 비교한다. 

function sortrows(table, n, comarator) {
  var tbody = table.tBodies[0]; // 첫번째 <tbody>. 암묵적으로 존재한다. 
  var rows = tbody.getElemetsByTagName("tr");; //tbody의 모든 행.
  rows = Array.prototype.slice.call(row, 0); // 배열로 변환.
  
  // n번째 <td>요소를 기준으로 행들을 정렬한다. 
  rows.sort(function(row1, row2) {
    var cell1 = row1.getElementByTagName("td")[n]; // n번째 열을 
    var cell2 = row2.getELementByTagName("td")[n]; // 두 행에서 가져온다.
    var val1 = cell1.textContent || cell1.innerText; // 텓스트를 
    var val2 = cell2.textContetn || cell2.innerText; // 두열에서 가져와서 
   if (comparator) { //비교한다
     return comparator(val1, val2);
   }
    if (val1 < val2) return -1;
    else if(val1 < val2) return 1
    else retun 0;
  });
  // 정렬된 행들을 tbody에 삽입한다. 원래 위치에서 자동으로 이동한다. 
  // 따라서 삭제할 필요가 없다. 
  // <tbody>에 <tr>이 아닌 노드가 있다면, 테이블 위에 떠 있을 것이다. 
  for( let i = 0; i < row.length; i++) {
    today.appendChild(row[i]);
  }
}

// 테이블에서  <th>요소(행 꼭대기에 유일하게 존재한다.)를 찾아서 클릭이 가능하게 바꾸고 
// 열의 헤더를 클릭하면 해당 열로 저열이 되게 만든다. 
function nakeSortable(table) {
  var headers = table.getElementsByTagName("th");
  for(var i = 0; i < headers.length; i++) {
    	(function(n) { // 지역 유효범위에 생성할 중첩함수
          headers[i].onclick = function() {
            sortrows(table, n);
          };
     }(i)); // 지역변수 n에 i값을 할당 
  }
}