바닐라자바스크립트로 개발을 하다보면 append 또는 appendChild 메서드를 통해 부모 노두에 자식 노드를 추가하여 데이터를 보여줘야하는 경우가 필수적으로 생긴다. 처음에는 appendChild를 이용해 부모 노드에 각각의 자식노드를 개별적으로 추가를 해줬는데 한번에 모두 추가하는 방법이 없을까를 찾아보다가 append 메서드를 알게 되었다.
1. append vs appendChild
두 메서드는 부모 노드에 자식 노드를 추가한다는 점에서 동일한 특징을 갖지만 몇가지 차이점은 존재한다. 그 중에서 가장 대표적인 것이 자식 노드를 한번에 하나씩 추가하느냐, 여러개를 한번에 추가하느냐인 것 같다.
1) appendChild
appendChild는 DOM 메서드이기 때문에 생성되어 있는 요소만 추가 가능하며 한 번에 하나의 자식 노드 객체를 추가할 수 있다.
const parent = document.createElement('div');
const childEle1 = document.createElement('h4');
const childEle2 = document.createElement('span');
childEle1.textContent = 'hello';
parent.appendChild(childEle1);
parent.appendChild(childEle2);
// result
<body>
<div>
<h4>hello</h4>
<span></span>
</div>
</body>2) append
append 메서드를 사용하면 부모 노드에 노드 객체 또는 text를 추가할 수 있고, 한번에 여러개의 자식요소를 추가할 수 있다.
const parent = document.createElement('div');
const childEle1 = document.createElement('h4');
const childEle2 = document.createElement('span');
childEle1.textContent = 'hello';
parent.append(childEle1, '안녕', childEle2);
// result
<body>
<div>
<h4>hello</h4>
안녕
<span></span>
</div>
</body>
2. prepend, after, before 은 뭘까?
1) prepend
앞서 appendChild와 append의 차이에 대해 간단하게 알아봤는데 이 두가지는 자식 노드를 추가하면 순서대로 가장 뒤쪽에 추가가 된다. 근데 나는 가장 맨 앞에 추가하고 싶다. 그러면 prepend를 이용하면 된다고 한다.
prepend는 append와 동일하게 자식 노드 또는 문자열을 추가 가능하며, 선택한 요소의 내부 맨앞에 추가된다고 보면 된다.
<body>
<div id="wrapper">
<span>인사</span>
<button id="btn">클릭</button>
</div>
<script>
document.getElementById('btn').onclick = function() {
const select = document.getElementById('wrapper');
const childDiv = document.createElement('div');
childDiv.textContent = '안녕하세요!';
select.prepend(childDiv); // 내부의 맨 앞에 추가
}
</script>
</body>
// button 클릭 prepend 실생 결과
<body>
<div id="wrapper">
<div>안녕하세요</div> // 추가된 부분
<span>인사</span>
<button id="btn">클릭</button>
</div>
<script>
document.getElementById('btn').onclick = function() {
const select = document.getElementById('wrapper');
const childDiv = document.createElement('div');
childDiv.textContent = '안녕하세요!';
select.prepend(childDiv);
}
</script>
</body>2) after
after은 선택한 요소 바로 뒤에 추가되는 것이기 때문에 부모자식관계가 아닌 형제관계이다.
<body>
<div id="wrapper">
<span>인사</span>
<button id="btn">클릭</button>
</div>
<script>
document.getElementById('btn').onclick = function() {
const select = document.getElementById('wrapper');
const childDiv = document.createElement('div');
childDiv.textContent = '안녕하세요!';
select.after(childDiv); // 선택한 요소의 뒤에 추가
}
</script>
</body>
// button 클릭 after 실행 결과
<body>
<div id="wrapper">
<span>인사</span>
<button id="btn">클릭</button>
</div>
<div>안녕하세요!</div> // 추가된 부분
<script>
document.getElementById('btn').onclick = function() {
const select = document.getElementById('wrapper');
const childDiv = document.createElement('div');
childDiv.textContent = '안녕하세요!';
select.after(childDiv);
}
</script>
</body>3) before
before은 선택한 요소 바로 앞에 추가되며 이 또한 역시 부모자식관계가 아닌 형제관계이다.
<body>
<div id="wrapper">
<span>인사</span>
<button id="btn">클릭</button>
</div>
<script>
document.getElementById('btn').onclick = function() {
const select = document.getElementById('wrapper');
const childDiv = document.createElement('div');
childDiv.textContent = '안녕하세요!';
select.before(childDiv); // 선택한 요소의 앞에 추가
}
</script>
</body>
// button 클릭 before 실행 결과
<body>
<div>안녕하세요!</div> // 추가된 부분
<div id="wrapper">
<span>인사</span>
<button id="btn">클릭</button>
</div>
<script>
document.getElementById('btn').onclick = function() {
const select = document.getElementById('wrapper');
const childDiv = document.createElement('div');
childDiv.textContent = '안녕하세요!';
select.before(childDiv);
}
</script>
</body>
이렇게 자바스크립트를 활용해 부모, 형제 노드에 필요한 부분을 추가하는 방법을 알아봤다. 지금까지는 appendChild가 유일한 방법인 줄 알고 다른 것들은 써보지 않았는데 잘 활용하면 조금 더 깔끔한 코드를 짤 수 있을 것 같다. appendChild만 썼다보니까 부모 노드에 자식 노드를 한번에 하나씩만 넣을 수 있었는데 이 부분이 해결되었다!!
