JavaScript 노드 생성과 추가

createElement()

javascript를 통해 동적으로 특정한 이름의 HTML element를 생성하는데 사용됨
element의 이름을 매개변수로 받아서 해당 노드를 생성

// 요소 노드 생성
const newDiv = document.createElement('div')

createTextNode()

// 텍스트 노드 생성
const textNode = document.createTextNode('환영합니다!")

apendChild()

한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막으로 붙임

// newDiv(div)에 textNode가 들어감
newDiv.appendChild(textNode);

insertBefore()

부모노드의 특정 자식 노드의 앞에 새로운 노드를 추가

// parentElement란 아이디를 가진 요소를 가져옴
const parentDiv = document.getElementById("parentElement")

// 요소 노드 생성
const li = document.createElement("li")

// li 요소 노드를 parentDiv의 마지막 자식 요소 앞에 삽입
parentDiv.insertBefor(li, parentDiv.lastElementChild)

cloneNode()

노드를 복사할 때 사용

const fruits = document.getElementById('fruits')
const apple = fruits.firstElementChild

// 얕은 복사, 텍스트 노드가 없는 사본이 생성
const shallowClone = apple.cloneNode()

// 깊은 복사, 모든 자손 노드가 포함
const deepClone = fruits.cloneNode(true)

replaceChild(), removeChild()

교체 및 삭제

Node.replaceChild(newChild, oldChild)
Node.removeChild(child)