[javascript] append와 appendChild 개념과 사용법
2021. 12. 24. 16:37
append와 appendChild
이 두가지는 공통적으로 부모 노드에 자식 노드를 추가하는 메소드이다.
append
append 메소드는 노드 객체(Node object) 나 DOMString(text) 를 사용할 수 있다. 또한 한 번에 여러 개의 자식 요소를 설정할 수 있다.
1) Node Object 예시
const parent = document.createElement('div');
const child = document.createElement('p');
parent.append(child);
// 결과
// <div><p></p></div>
// div를 생성하는 parent 노드 속에, 아래에, 하위로 child 노드의 'p' 태그를 생성했다.
2) DOMString 예시
const parent = document.createElement('div');
parent.append("DOMString 생성");
// 결과
// <div>DOMString 생성</div>
// parent로 생성되는 div 안에 텍스트를 입력할 수도 있다.
3) 여러 개의 자식 노드를 추가 예시
const parent = document.createElement("div");
const child1 = document.createElement("span");
const child2 = document.createElement("p");
document.body.append(parent, child1, child2, 'hello');
//결과
<body>
<div></div>
<span></span>
<p>
hello
</p>
</body>
// 1번의 노드 객체와의 차이점은, body라는 태그 아래에 복수의 자식 노드를 추가했다는 점.
// 그리고 그 속에서 태그 속에 입력값, 텍스트값을 추가할 수도 있다는 점이다.
return값 = console.log(document.body.append(parent, child1, child2, 'hello'));
// undefined 가 나온다.
appendChild
append와는 달리 문자열(DOMString)은 입력받을 수 없습니다. 또한 여러 자식 노드를 한꺼번에 추가할 수도 없습니다.
오직 하나의 노드 객체만 추가할 수 있습니다. 또한 console.log를 활용한 리턴값을 알 수 있다.
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);
// 결과
// <div><p></p></div>
// div를 생성하는 parent 노드 속에, 아래에, 하위로 child 노드의 'p' 태그를 생성했다.
'Javascript' 카테고리의 다른 글
| 정규 표현식과 메타문자 총정리 (0) | 2022.04.21 |
|---|---|
| [Javascript] 배열 Arr 관련 메서드 정리 (0) | 2021.12.27 |
| [Javascript] on 속성을 활용한 이벤트 등록과 ".EventListener" 정리 (0) | 2021.12.24 |
| [Javascript] 연산자 정리 (0) | 2021.12.24 |
| [Javascript] <태그>, #속성 기본 정리 (0) | 2021.12.24 |
