<body>
</body>
let p = document.createElement('p');
// p 변수에 p 엘리먼트를 생성해서 넣는다.
// <p></p>
let text = document.createTextNode('글자');
// text 변수에 '글자'라는 텍스트 노드를 생성해서 넣는다.
p.appendChild(text);
// p 엘리먼트 안에 text 노드를 넣는다.
// <p>글자</p>
document.body.appendChild(p);
// body 엘리먼트 안에 p 엘리먼트를 추가한다.
// <body><p>글자</p></body>
<body>
<p>글자</p>
</body>
// appendChild 대신 append나 prepend를 사용할 수 있다. (더 제약 없이 사용 가능)
// 엘리먼트 안에 자식 노드가 이미 있다면
// appendChild와 append는 자식 노드들의 가장 뒤쪽에 추가시키고
// prepend는 자식 노드들의 가장 앞쪽에 추가시킨다.
'자바스크립트 > DOM 이론' 카테고리의 다른 글
| 웹에서 화면 변경시 화면의 크기 값을 가져오는 방법 (0) | 2020.08.22 |
|---|---|
| 돔에서 값을 사용자 컴퓨터에 저장하는 메소드 - localStorage (0) | 2020.03.05 |
| 돔 엘리먼트의 클래스 이름 다루기 - classList (0) | 2020.03.03 |
| 돔 엘리먼트 안의 텍스트 변경하기 - innerHTML (0) | 2020.02.23 |
| 돔 엘리먼트 가져오기 1 - querySelector 메소드 (0) | 2020.02.22 |