[DOM] Append

append 포함

DOM을 이용하여 HTML Element를 부모노드에 포함하는 것

(공중부양하고있는걸 트리구조에 연결한다)

 

이전단계에서 여기까지 진행했다.

const tweetDiv = document.createElement('div')

 

1. 생성한 tweetDiv를 트리구조에 연결한다.

변수 tweetDiv에 담긴 div요소를 body요소에 넣는다.

document.body.append(tweetDiv)

개발자도구에서 확인하면 div가 body안에 담겨있는걸 확인할수있다

 

2. container의 맨 마지막 자식요소로 tweetDiv를 추가한다. ★★★★★★★

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

---

# appendChild() : 선택한 요소 안에 자식요소를 추가한다.

기본적으로 appendChild()를 통해 요소를 삽입하면 맨뒤에 위치하게 된다.

document.body.appendChild(hello);
//h1태그코드를 가진 hello라는 변수가 body 태그 내부에 생성된다

 

# prepend(): append와 달리 요소의 맨앞에 위치하게 된다는 차이점이 있다

 

# insertBefore()
appendChild()와 비슷하지만 전달받는 인자가 2개이다.
첫번째는 삽입하려는 노드
두번째는 삽입의 기준이 되는 노드로, 새 노드는 이앞에 놓이게 된다(삽입할 노드의 다음노드가 된다는거다)