appendChild로 여러개 추가, append vs appendChild 차이(+ prepend, after, before)

2023. 2. 2. 20:24· Language/javascript
목차
  1. 1. append vs appendChild
  2. 1)  appendChild
  3.  
  4. 2)  append
  5. 2. prepend, after, before 은 뭘까?
  6. 1) prepend
  7.  
  8. 2) after
  9.  
  10. 3) before
반응형

 

바닐라자바스크립트로 개발을 하다보면 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만 썼다보니까 부모 노드에 자식 노드를 한번에 하나씩만 넣을 수 있었는데 이 부분이 해결되었다!!

반응형

 

반응형
저작자표시 비영리 동일조건 (새창열림)
  1. 1. append vs appendChild
  2. 1)  appendChild
  3.  
  4. 2)  append
  5. 2. prepend, after, before 은 뭘까?
  6. 1) prepend
  7.  
  8. 2) after
  9.  
  10. 3) before
'Language/javascript' 카테고리의 다른 글
  • 자바스크립트 배열은 배열이 아니다?
  • 자바스크립트 ES6 함수의 추가기능 살펴보기
  • 자바스크립트 Strict mode 왜 쓰는걸까? + 제약조건
  • 자바스크립트 함수가 일급객체인 이유, 클로저란?
도잎
도잎
프론트엔드 개발 성장기록
도잎
JDevelog
도잎
전체
오늘
어제
반응형
  • 분류 전체보기 (149)
    • Web dev (48)
      • React (22)
      • Vue (8)
      • Next.js (6)
      • Node.js (2)
      • Springboot (2)
    • App dev (2)
      • Flutter (2)
    • Language (33)
      • javascript (30)
      • typescript (2)
      • java (1)
    • StyleSeet (3)
      • CSS (3)
      • Sass (0)
    • Database (2)
      • PostgreSQL (1)
    • DevOps (11)
      • Webpack (4)
      • Linux (3)
      • Docker (2)
      • Tomcat (1)
    • 개발지식 (2)
      • Web (1)
    • 항해99(6기) (20)
    • UXUI (0)
    • 알고리즘 (25)
    • 유용정보 (2)

최근 글

hELLO · Designed By 정상우.v4.2.1
도잎
appendChild로 여러개 추가, append vs appendChild 차이(+ prepend, after, before)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.