appendChild() 예제
<ul id="code">
<li>HTML</li>
<li>CSS</li>
</ul>
<button onclick="hz()">클릭</button>
<script>
function hz() {
var node = document.createElement("LI"); // 요소 생성
var textnode = document.createTextNode("JS"); // 내용 생성
node.appendChild(textnode); // 요소에 내용 결합
document.getElementById("code").appendChild(node); // 기존요소에 생성요소 결합
}
</script>
결과보기
appendChild() 정의
1.
아래 용도로 사용 가능
① 노드를 어떤 노드의 마지막 자식으로 추가.
② 어떤 요소를 한 요소에서 다른 요소로 이동시킬 때도 사용.
② 어떤 요소에 텍스트 추가할 때 사용
2.
텍스트 가진 단락을 문서에 추가하려면 먼저 text 생성 노드 이용해 text 생성 필요.
text 생성해 단락에 붙인 다음, 그 단락을 문서에 추가.
3.
노드를 어떤 노드의 첫 자식으로 추가하려면 아래 코드 이용.
insertBefore()
5.
주요 최신 브라우저 모두 지원.
※ 노드 (Node) : 네트워크에서 연결 포인트 혹은 데이터 전송의 종점 혹은 재분배점
appendChild() 구문
node1.appendChild(node2)
[매개변수]
node2
필수. 부착할 자식 노드 객체. (예) <li>JS</li>
cf.
node1
자식노드인 node2가 추가되는 부모 요소 (예) <ul id="code"> ~ </ul>
appendChild() 예제1 - 자식요소 이동
<ul id="code1"><li>HTML</li><li>CSS</li></ul>
<ul id="code2"><li>PHP</li><li>SQL</li><li>JS</li></ul>
<button onclick="hz()">클릭</button>
<script>
function hz() {
var node = document.getElementById("code2").lastChild;
document.getElementById("code1").appendChild(node);
}
</script>
결과보기
※ code2의 마지막 자식을 code1의 마지막 자식으로 이동
appendChild() 예제2 - 요소 생성 후 텍스트 추가. 생성요소를 다른요소 자식으로 추가
<style>
#box {
border: 1px solid silver;
margin-bottom: 10px;
}
</style>
<div id="box">
홈짱닷컴
</div>
<button onclick="hz()">클릭</button>
<script>
function hz() {
var txt = document.createElement("P");
txt.innerHTML = "Homzzang.com";
document.getElementById("box").appendChild(txt);
}
</script>
결과보기
appendChild() 예제3 - 요소 생성 후 텍스트 추가. 생성요소를 body 태그에 바로 추가
<button onclick="hz()">클릭</button>
<script>
function hz() {
var x = document.createElement("P");
var t = document.createTextNode("홈짱닷컴 Homzzang.com");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
appendChild() 예제 - 클래스 가진 자식요소 자동생성
<div class="grid-container">
</div>
<script>
// 아이템 1 ~ 16 생성
for (let i = 1; i <= 16; i++) {
const div = document.createElement("div");
div.textContent = i;
div.classList.add(`item${i}`);
document.querySelector(".grid-container").appendChild(div);
}
</script>
관련 메서드
element.hasChildNodes() - 자세히 보기
element.insertBefore()
element.removeChild()
element.replaceChild()
document.createElement()
document.createTextNode()
document.adoptNode()
document.importNode()
