부모 노드 맨 앞에 요소를 삽입하는 방법 (appendChild 말고! prependChild Javascript)

자바스크립트 맨 앞쪽에 요소를 삽입하는 방법 (appendChild 말고! prependChild)

appendChild?

자바스크립트를 사용하다보면 특정 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 배치하고 싶을 때 appendChild 메서드를 굉장히 많이 사용하는데요. 아래 예시와 같은 경우에 appendChild를 사용하곤 한답니다.

// html
<ul class="list">
  <li>Javascript</li>
</ul>

// javascript
const el = document.createElement('li');
el.textContent = 'appendChild';

document.querySelector('.list').appendChild(el);

// result
<ul class="list">
  <li>Javascript</li>
  <li>appendChild</li>
</ul>

prependChild?

하지만, 특정 부모 노드의 자식 노드 리스트 중 첫번 째 자식으로 배치하고 싶은 경우도 생깁니다. 아래와 같은 결과를 기대하고 해당하는 메서드가 있는지 찾아봤으나... (jQuery의 prepend 메서드를 생각하고 한번 검색)

// html
<ul class="list">
  <li>Javascript</li>
</ul>

// javascript
const el = document.createElement('li');
el.textContent = 'prependChild';

document.querySelector('.list').prependChild(el);

// result
<ul class="list">
  <li>prependChild</li>
  <li>Javascript</li>
</ul>

공식적으로 자바스크립트 prependChild 메서드는 존재하지 않았습니다. 하지만 간편하게 메서드로 존재하지 않은 것이지 구현할 수 없다는 것은 아닙니다. prependChild 메서드와 동일하게 동작하는 코드를 작성해보겠습니다.

구현 예시

자바스크립트의 insertBefore와 firstChild를 조합해서 사용하면 prependChild와 동일한 동작을 하는 메서드를 구현할 수 있습니다.

const el = document.createElement('li');
el.textContent = 'prependChild';

const parent = document.querySelector('.list'); // 부모 노드

parent.insertBefore(el, parent.firstChild);

// result
<ul class="list">
  <li>prependChild</li>
  <li>Javascript</li>
</ul>