[JS] append & prepend & after & before

---

알고있으면 좋은 Javascript Tip✨

---

append()

• 컨텐츠를 선택 요소 내부의 끝 부분에서 삽입한다.
• Node 객체로 자식 요소를 설정할 수 있고, text를 사용할 수 있다.
• 쉽게 말해 append()는 선택한 엘리먼트의 제일 마지막에 넣어준다. (기존 내용이 있다면 그 뒤에)

예시) 아래와 같은 HTML 요소가 있다면?
<ol id="list">
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
</ol>

let list = document.querySelector('#list');
list.append('<li>새로 추가된 아이템</li>');

// 결과) 
<ol id="list">
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
    <li>새로 추가된 아이템</li>
</ol>

 

prepend()

• 컨텐츠를 선택 요소 내부의 시작 부분에서 삽입한다.
• 쉽게 말해 prepend()는 선택한 엘리먼트의 제일 첫번째로 넣어준다. (기존의 내용이 있어도 그 앞에)

예시) 아래와 같은 HTML 요소가 있다면?
<ol id="list">
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
</ol>

let list = document.querySelector('#list');
list.append('<li>새로 추가된 아이템</li>');

// 결과) 
<ol id="list">
    <li>새로 추가된 아이템</li>
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
</ol>

 

after()

• 선택한 요소 뒤에 컨텐츠 삽입
• 쉽게말해 after()는 지정한 요소의 바로 뒤에 컨텐츠를 추가한다. (특정 요소의 형제 요소로 새로운 컨텐츠 삽입)

예시) 아래와 같은 HTML 요소가 있다면?
<div id="reference">기준 요소</div>

let newContent = document.createElement("p");
newContent.textContent = "이 내용은 기준 요소 뒤에 추가됩니다.";
let referenceElement = document.getElementById("reference");

referenceElement.after(newContent);

// 결과
<div id="reference">기준 요소</div>
<p>이 내용은 기준 요소 뒤에 추가됩니다.</p>

 

before()

• 선택한 요소 앞에 컨텐츠 삽입
• 쉽게 말해 before()는 지정한 요소 바로 앞에 컨텐츠를 추가한다. (특정 요소의 형제 요소로 새로운 컨텐츠 삽입)

예시) 아래와 같은 HTML 요소가 있다면?
<div id="reference">기준 요소</div>

let newContent = document.createElement("p");
newContent.textContent = "이 내용은 기준 요소 앞에 추가됩니다.";
let referenceElement = document.getElementById("reference");

referenceElement.before(newContent);

// 결과
<p>이 내용은 기준 요소 앞에 추가됩니다.</p>
<div id="reference">기준 요소</div>