새 HTML 노드 만들기

DOM에 새 노드를 추가하려면 먼저 노드를 생성한 다음 기존 요소에 추가 해야 합니다.

• 요소 생성

  메서드	설명
  document.createElement()	새로운 ELEMENT_NODE를 생성합니다.
  document.createComment()	COMMENT_NODE를 생성합니다.
  document.createTextNode()	TEXT_NODE를 생성합니다.
  document.normalize()	빈 텍스트 노드를 제거하고 인접한 노드와 병합
  document.createDocumentFragment()	메모리에 새로운 가상 노드 객체를 생성합니다. 문서의 일부틀 추출,변경, 추가, 삭제,삽입하는 경우에 유용합니다.
  element.cloneNode()	노드를 복제 합니다.
  element.normalize()	빈 텍스트 노드를 제거하고 인접한 노드와 병합합니다.

• 요소 추가/삭제

  메서드	설명
  element.appendChild()	요소에 새 하위 요소를 끝에 추가합니다.
  element.insertBefore()	지정된 하위노드 앞에 새 노드를 삽입합니다.
  element.removeChild()	하위 노드를 제거합니다.
  element.replaceChild()	하위 노드를 교체 합니다.

• element.insertAdjacentHTML(position, text)요소추가 확장 메서드

  position은 다음 4가지 값중 하나입니다.

  beforebegin	호출한 요소 바로 앞에 삽입 (previousSibling 요소가 됩니다)
  afterbegin	호출한 요소의 firstChild 앞에 삽입 (firstChild 요소가 됩니다.)
  beforeend	호출한 요소의 lastChild 다음에 삽입 (lastChild 요소가 됩니다.)
  afterend	호출한 요소의 바로 뒤에 삽입 (nextSibling 요소가 됩니다.)

  text는 outerHTML 또는 innerHTML과 같이 문자열로 파싱됩니다.