돔 엘리먼트 안에 엘리먼트와 노드 추가하기 - createElement, createTextNode, appendChild 메소드

자바스크립트/DOM 이론

Socratone 2020. 2. 23. 05:33

<body>

</body>

let p = document.createElement('p');

// p 변수에 p 엘리먼트를 생성해서 넣는다.

//

let text = document.createTextNode('글자');

// text 변수에 '글자'라는 텍스트 노드를 생성해서 넣는다.

p.appendChild(text);

// p 엘리먼트 안에 text 노드를 넣는다.

// 글자

document.body.appendChild(p);

// body 엘리먼트 안에 p 엘리먼트를 추가한다.

// <body>글자</body>

<body>

글자

</body>

// appendChild 대신 append나 prepend를 사용할 수 있다. (더 제약 없이 사용 가능)

// 엘리먼트 안에 자식 노드가 이미 있다면

// appendChild와 append는 자식 노드들의 가장 뒤쪽에 추가시키고

// prepend는 자식 노드들의 가장 앞쪽에 추가시킨다.