JavaScript 요소 추가
자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다.
- .createElement()
- .createTextNode()
- .appendChild()
노드 객체 생성하는 주요 메서드
| 메서드 | 생성하는 노드 객체 |
| document.createElement(요소 이름) | 요소 노드 객체 |
| document.createAttribute(속성 이름) | 속성 노드 객체 |
| document.createTextNode(텍스트) | 텍스트 노드 객체 |
| document.createComment(텍스트) | 주석 노드 객체 |
| document.createDocumentFragment() | 도큐먼트 프래그먼트 |
| document.importNode(다른 문서의 노드, deep) | 다른 문서에 있는 노드를 복사한다. deep을 true로 설정하면 자식 노드까지 복사하고, false로 설정하면 얕은 복사를 한다. |
| document.cloneNode(deep) | 노드를 복사한다. deep을 true로 설정하면 자식 노드까지 복사하고, false로 설정하면 얕은 복사를 한다. |
JavaScript 요소 추가 순서
01. 노드 생성하기
1. 노드 생성 ▶ 지정된 이름의 HTML요소 생성
document.createElement("tagName"); // 요소 노드 생성
2. 텍스트 노드 객체 생성 ▶ 선택한 요소에 텍스트 삽입
document.createTextNode("textNode"); // 텍스트 노드 생성
02. 노드 삽입하기
3. 노드 삽입
🔎 노드 객체를 만들었으므로, DOM 트리에 삽입합니다.
노드 객체를 DOM 트리에 삽입하는 메서드는 Node 객체에 있는 appendChild와 insertBefore 메서드 입니다.
🔨 appendChild 메서드
요소 노드.appendChild(삽입할 노드)
→ 해당 요소의 마지막 자식 노드로 삽입합니다.
🔨 insertBefore 메서드
요소 노드.insertBefore(삽입할 노드, 자식 노드)
→ 지정한 자식 노드 바로 앞에 노드 객체를 삽입합니다.
node.appendChild(aChild); // 부모 노드의 자식노드 리스트 중 마지막 자식노드로 삽입➕ 노드 삭제하기
삭제할 수 있는 노드가 해당 노드의 자식 노드라는 점에 유의합니다.
즉, 삭제하려는 노드의 부모 노드 객체에서 removeChild 메서드를 호출합니다.
노드.removeChild(자식 노드);➕ 노드 치환하기
노드의 자식 노드만 치환할 수 있다는 점에 유의합니다.
즉, 치환하려는 노드의 부모 노드에서 replaceChild 메서드를 호출합니다.
노드.replaceChild(새로운 노드,자식 노드);
사용예시
Click이라는 텍스트를 가진 button 요소를 추가하는 예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbBtn = document.createElement( 'button' );
var jbBtnText = document.createTextNode( 'Click' );
jbBtn.appendChild( jbBtnText );
document.body.appendChild( jbBtn );
</script>
</body>
</html>
👉 각줄 코드 해석
1. button 요소를 만들고 jbBtn에 저장합니다.
var jbBtn = document.createElement( 'button' );
2. Click이라는 텍스트를 만들고 jbBtnText에 저장합니다.
var jbBtnText = document.createTextNode( 'Click' );
3. jbBtn에 jbBtnText를 넣습니다.
jbBtn.appendChild( jbBtnText );
4. jbBtn을 body의 자식 요소로 넣습니다.
document.body.appendChild( jbBtn );
