[지식루프 IT공부] prepend, append, before, after의 차이

prepend, append, before, after의 차이.

이는 JavaScript에서 DOM(Document Object Model)을 조작하는 방법인데, 각각의 메서드가 HTML 요소를 어떻게 다루는지 보여주고 있습니다.

코드 분석

1. *append (코드: tomorrow.append(last))
   • 의미: append는 특정 요소의 맨 끝에 새로운 요소를 추가합니다.
   • 코드 설명:
     • last라는 요소(<p>마지막</p>)를 tomorrow라는 부모 요소의 맨 마지막 자식으로 추가해요.
     • 즉, tomorrow 요소 안에 이미 자식 요소들이 있다면, 그 뒤에 last가 붙습니다.
   • 예시 결과: 만약 tomorrow가 <div id="tomorrow"><p>기존</p></div>였다면, append(last) 후에는 <div id="tomorrow"><p>기존</p><p>마지막</p></div>가 됩니다.
2. *prepend (코드: tomorrow.prepend(first))
   • 의미: prepend는 특정 요소의 맨 처음에 새로운 요소를 추가합니다.
   • 코드 설명:
     • first라는 요소(코드에서는 정의되지 않았지만, prepend의 첫 번째 인자로 사용됨)를 tomorrow라는 부모 요소의 맨 첫 번째 자식으로 추가해요.
     • 즉, tomorrow 요소 안에 이미 자식 요소들이 있다면, 그 앞에 first가 붙습니다.
   • 예시 결과: tomorrow가 <div id="tomorrow"><p>기존</p></div>였다면, prepend(first) 후에는 <div id="tomorrow"><p>first</p><p>기존</p></div>가 됩니다.
3. *before (코드: tomorrow.before(prev))
   • 의미: before는 특정 요소 바로 앞에 새로운 요소를 삽입합니다.
   • 코드 설명:
     • prev라는 요소(<p>이전</p>)를 tomorrow 요소 바로 앞에 삽입해요.
     • 여기서 before는 tomorrow 자체를 기준으로 동작하므로, tomorrow의 부모 노드에서 tomorrow 바로 앞에 prev가 추가됩니다.
   • 예시 결과: 만약 부모가 <div><div id="tomorrow"></div></div>라면, before(prev) 후에는 <div><p>이전</p><div id="tomorrow"></div></div>가 됩니다.
4. *after (코드: tomorrow.after(next))
   • 의미: after는 특정 요소 바로 뒤에 새로운 요소를 삽입합니다.
   • 코드 설명:
     • next라는 요소(<p>다음</p>)를 tomorrow 요소 바로 뒤에 삽입해요.
     • after도 tomorrow 자체를 기준으로 동작하므로, tomorrow의 부모 노드에서 tomorrow 바로 뒤에 next가 추가됩니다.
   • 예시 결과: 부모가 <div><div id="tomorrow"></div></div>라면, after(next) 후에는 <div><div id="tomorrow"></div><p>다음</p></div>가 됩니다.

---

비교 및 차이점

이제 코드와 이전 답변을 바탕으로 prepend, append, before, after를 비교해 볼게요:

메서드 위치 기준 코드 예시 결과 예시 (가정: tomorrow가 <div id="tomorrow"><p>기존</p></div>)

prepend	부모 요소의 맨 처음 자식	부모 요소 내부	tomorrow.prepend(first)	<div id="tomorrow"><p>first</p><p>기존</p></div>
append	부모 요소의 맨 마지막 자식	부모 요소 내부	tomorrow.append(last)	<div id="tomorrow"><p>기존</p><p>마지막</p></div>
before	대상 요소의 바로 앞	대상 요소의 부모 기준	tomorrow.before(prev)	<div><p>이전</p><div id="tomorrow"><p>기존</p></div></div>
after	대상 요소의 바로 뒤	대상 요소의 부모 기준	tomorrow.after(next)	<div><div id="tomorrow"><p>기존</p></div><p>다음</p></div>

---

추가적인 차이점

• prepend와 append는 부모-자식 관계를 다룹니다. 즉, 요소 내부에서 자식 노드를 추가하는 방식이에요.
  • prepend: 자식 중 맨 앞에 추가.
  • append: 자식 중 맨 뒤에 추가.
• before와 after는 형제 관계를 다룹니다. 즉, 특정 요소와 같은 레벨(형제 노드)에서 위치를 조정하는 방식이에요.
  • before: 대상 요소 바로 앞에 형제 노드로 추가.
  • after: 대상 요소 바로 뒤에 형제 노드로 추가.

---

시각적 이해

가정: HTML 구조가 <div id="parent"><div id="tomorrow"><p>기존</p></div></div>일 때, 각 메서드 적용 후 결과:

• tomorrow.prepend(first) → <div id="parent"><div id="tomorrow"><p>first</p><p>기존</p></div></div>
• tomorrow.append(last) → <div id="parent"><div id="tomorrow"><p>기존</p><p>마지막</p></div></div>
• tomorrow.before(prev) → <div id="parent"><p>이전</p><div id="tomorrow"><p>기존</p></div></div>
• tomorrow.after(next) → <div id="parent"><div id="tomorrow"><p>기존</p></div><p>다음</p></div>

---

결론

• prepend와 append는 부모 요소 내부에서 자식 요소를 추가할 때 사용되고, 위치가 맨 처음이냐 맨 마지막이냐의 차이예요.
• before와 after는 대상 요소와 같은 레벨(형제)에서 요소를 추가하며, 대상 요소를 기준으로 앞이냐 뒤냐의 차이입니다.