IT공부

[지식루프 IT공부] .remove, .prepend, .append, .before, .after 를 이용한 노드 삭제, 이동방법

지식루프 2025. 3. 25. 19:58
728x90
반응형

1. .remove()를 이용한 노드 삭제

.remove() 메서드는 DOM에서 특정 요소를 삭제하는 데 사용됩니다. 이 메서드는 해당 요소를 DOM 트리에서 완전히 제거하며, 더 이상 페이지에 표시되지 않습니다.

예제: 노드 삭제

html

미리보기접기자동 줄바꿈복사

`<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>노드 삭제 예제</title> </head> <body> <div id="parent"> <p id="item1">항목 1</p> <p id="item2">항목 2</p> <p id="item3">항목 3</p> </div> <button onclick="removeItem()">항목 2 삭제</button>

<script> function removeItem() { const item2 = document.getElementById('item2'); item2.remove(); // item2 요소를 DOM에서 삭제 } </script> </body> </html>`

설명:

  • 코드 동작:
    • <p id="item2">항목 2</p> 요소를 getElementById로 선택한 뒤, .remove()를 호출해 삭제합니다.
    • 버튼을 클릭하면 item2가 DOM에서 제거되어 더 이상 화면에 표시되지 않아요.
  • 결과:
    • 삭제 전: <div id="parent"><p id="item1">항목 1</p><p id="item2">항목 2</p><p id="item3">항목 3</p></div>
    • 삭제 후: <div id="parent"><p id="item1">항목 1</p><p id="item3">항목 3</p></div>

2. prepend, append, before, after를 이용한 노드 이동

prepend, append, before, after는 새로운 노드를 추가하는 데 주로 사용되지만, 기존 노드를 이동하는 데도 사용할 수 있어요. DOM에서 노드를 이동할 때는 노드를 새 위치로 추가하면 자동으로 원래 위치에서 제거됩니다. 즉, 별도로 .remove()를 호출할 필요 없이 이동이 가능합니다.

예제: 노드 이동

아래 예제는 prepend, append, before, after를 사용해 기존 노드를 다른 위치로 이동하는 방법을 보여줍니다.

html

미리보기접기자동 줄바꿈복사

`<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>노드 이동 예제</title> </head> <body> <div id="container1"> <p id="item1">항목 1</p> <p id="item2">항목 2</p> </div> <div id="container2"> <p id="item3">항목 3</p> <p id="item4">항목 4</p> </div>

<button onclick="moveWithPrepend()">container2의 맨 처음으로 이동 (prepend)</button> <button onclick="moveWithAppend()">container2의 맨 마지막으로 이동 (append)</button> <button onclick="moveWithBefore()">item3 앞에 이동 (before)</button> <button onclick="moveWithAfter()">item3 뒤에 이동 (after)</button>

<script> const item1 = document.getElementById('item1'); const container2 = document.getElementById('container2'); const item3 = document.getElementById('item3');

*// prepend로 이동: container2의 맨 처음으로 item1 이동*
function moveWithPrepend() {
  container2.prepend(item1);
}

*// append로 이동: container2의 맨 마지막으로 item1 이동*
function moveWithAppend() {
  container2.append(item1);
}

*// before로 이동: item3 바로 앞에 item1 이동*
function moveWithBefore() {
  item3.before(item1);
}

*// after로 이동: item3 바로 뒤에 item1 이동*
function moveWithAfter() {
  item3.after(item1);
}

</script> </body> </html>`

설명:

  • 초기 HTML 구조:접기자동 줄바꿈복사
  • <div id="container1"> <p id="item1">항목 1</p> <p id="item2">항목 2</p> </div> <div id="container2"> <p id="item3">항목 3</p> <p id="item4">항목 4</p> </div>
  • html
  • 1. prepend로 이동 (moveWithPrepend):
    • container2.prepend(item1)를 호출하면 item1이 container2의 맨 처음 자식으로 이동합니다.
    • 결과:접기자동 줄바꿈복사
    • <div id="container1"> <p id="item2">항목 2</p> </div> <div id="container2"> <p id="item1">항목 1</p> <p id="item3">항목 3</p> <p id="item4">항목 4</p> </div>
    • html
  • 2. append로 이동 (moveWithAppend):
    • container2.append(item1)를 호출하면 item1이 container2의 맨 마지막 자식으로 이동합니다.
    • 결과:접기자동 줄바꿈복사
    • <div id="container1"> <p id="item2">항목 2</p> </div> <div id="container2"> <p id="item3">항목 3</p> <p id="item4">항목 4</p> <p id="item1">항목 1</p> </div>
    • html
  • 3. before로 이동 (moveWithBefore):
    • item3.before(item1)를 호출하면 item1이 item3 바로 앞에 형제 노드로 이동합니다.
    • 결과:접기자동 줄바꿈복사
    • <div id="container1"> <p id="item2">항목 2</p> </div> <div id="container2"> <p id="item1">항목 1</p> <p id="item3">항목 3</p> <p id="item4">항목 4</p> </div>
    • html
  • 4. after로 이동 (moveWithAfter):
    • item3.after(item1)를 호출하면 item1이 item3 바로 뒤에 형제 노드로 이동합니다.
    • 결과:접기자동 줄바꿈복사
    • <div id="container1"> <p id="item2">항목 2</p> </div> <div id="container2"> <p id="item3">항목 3</p> <p id="item1">항목 1</p> <p id="item4">항목 4</p> </div>
    • html

.remove()와 prepend, append, before, after의 차이

  • .remove():
    • 노드를 삭제하는 데 사용됩니다.
    • DOM에서 완전히 제거되며, 더 이상 해당 노드는 존재하지 않아요.
    • 사용 목적: 노드가 필요 없을 때 완전히 제거할 때 사용.
  • prepend, append, before, after (이동 시):
    • 노드를 이동하는 데 사용됩니다.
    • DOM에서 노드를 새 위치로 옮기면, 원래 위치에서 자동으로 제거됩니다. (즉, .remove()를 따로 호출할 필요 없음)
    • 사용 목적: 노드를 삭제하지 않고 다른 위치로 재배치할 때 사용.

추가 팁: .remove() 후 재사용

.remove()로 삭제된 노드는 DOM에서 제거되지만, JavaScript 변수에 여전히 참조가 남아 있다면 나중에 다시 추가할 수 있어요. 예를 들어:

javascript

접기자동 줄바꿈복사

const item1 = document.getElementById('item1'); item1.remove(); *// DOM에서 제거// 나중에 다시 추가 가능* document.getElementById('container2').append(item1);

요약

  • 삭제: .remove()를 사용하면 노드가 DOM에서 완전히 제거됩니다.
  • 이동: prepend, append, before, after를 사용하면 노드를 새 위치로 이동하며, 원래 위치에서 자동으로 제거됩니다.
  • 차이점: 삭제는 노드를 없애는 것이고, 이동은 노드를 다른 곳으로 옮기는 것입니다.

[참고] .remove() 후 재사용 가능한 이유

.remove()로 삭제된 노드와 JavaScript 변수의 참조에 대해 더 자세히 설명드릴게요. 이 부분은 DOM(Document Object Model)과 JavaScript의 메모리 관리 방식에 대한 이해가 필요해서, 단계적으로 풀어서 설명해볼게요.

1. DOM과 JavaScript 변수의 관계

  • DOM: 브라우저가 HTML을 해석해서 만든 트리 구조로, 웹 페이지의 요소(노드)들이 계층적으로 저장된 상태예요. <div>, <p> 같은 요소들이 DOM 트리에 속해 있어요.
  • JavaScript 변수: JavaScript에서 선언한 변수는 DOM 노드를 참조(가리킴)할 수 있어요. 예를 들어, const item = document.getElementById('item1')처럼 DOM 요소를 변수에 저장하면, 그 변수는 해당 DOM 노드를 가리키는 참조를 가지게 됩니다.

2. .remove()가 하는 일

  • .remove() 메서드는 특정 노드를 DOM 트리에서 제거합니다. 즉, 해당 노드가 웹 페이지에서 더 이상 표시되지 않고, DOM 구조에서도 사라져요.
  • 하지만 .remove()는 DOM에서만 노드를 제거할 뿐, JavaScript 변수가 그 노드를 참조하고 있는 메모리에는 영향을 주지 않아요.

예시:

html

접기자동 줄바꿈복사

<div id="parent"> <p id="item1">항목 1</p> </div> <script> const item1 = document.getElementById('item1'); *// item1 변수가 DOM 노드를 참조* item1.remove(); *// DOM에서 item1 노드 제거* console.log(item1); *// 하지만 item1 변수는 여전히 노드를 참조하고 있음* </script>

  • DOM에서 제거됨: .remove() 호출 후, <p id="item1">항목 1</p>는 DOM 트리에서 사라져서 <div id="parent"></div>만 남습니다. 페이지에서도 더 이상 보이지 않아요.
  • JavaScript 변수는 유지됨: item1 변수는 여전히 <p id="item1">항목 1</p> 노드를 참조하고 있어요. 이 노드는 DOM에는 없지만, JavaScript 메모리에는 남아 있는 상태예요.

3. 삭제된 노드를 다시 추가할 수 있는 이유

JavaScript 변수가 여전히 노드를 참조하고 있다면, 그 노드는 메모리에 남아 있으므로 다시 DOM에 추가할 수 있어요. DOM에서 제거되었다고 해서 노드 자체가 완전히 소멸된 게 아니라, 단지 DOM 트리에서 "연결이 끊긴" 상태일 뿐이에요.

예제: 삭제 후 다시 추가하기

html

미리보기접기자동 줄바꿈복사

`<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>삭제 후 재추가 예제</title> </head> <body> <div id="parent"> <p id="item1">항목 1</p> </div> <div id="container"> <p id="item2">항목 2</p> </div>

<button onclick="removeItem()">항목 1 삭제</button> <button onclick="reAddItem()">항목 1 다시 추가</button>

<script> const item1 = document.getElementById('item1'); // item1 변수가 DOM 노드를 참조 const container = document.getElementById('container');

function removeItem() {
  item1.remove(); *// DOM에서 item1 제거*
  console.log(item1); *// 변수는 여전히 참조 유지*
}

function reAddItem() {
  container.append(item1); *// item1을 container에 다시 추가*
}

</script> </body> </html>`

동작 설명:

  1. 초기 상태:접기자동 줄바꿈복사
    • item1 변수는 <p id="item1">항목 1</p> 노드를 참조하고 있어요.
  2. <div id="parent"> <p id="item1">항목 1</p> </div> <div id="container"> <p id="item2">항목 2</p> </div>
  3. html
  4. "항목 1 삭제" 버튼 클릭:
    • item1.remove()가 호출되어 <p id="item1">항목 1</p>가 DOM에서 제거됩니다.
    • DOM 상태:접기자동 줄바꿈복사
    • <div id="parent"> </div> <div id="container"> <p id="item2">항목 2</p> </div>
    • html
    • 하지만 item1 변수는 여전히 <p id="item1">항목 1</p> 노드를 참조하고 있어요. 이 노드는 DOM에는 없지만 JavaScript 메모리에 남아 있는 상태예요.
  5. "항목 1 다시 추가" 버튼 클릭:
    • container.append(item1)를 호출하면 item1 변수가 참조하고 있는 노드(<p id="item1">항목 1</p>)를 container의 맨 마지막에 추가합니다.
    • DOM 상태:접기자동 줄바꿈복사
    • <div id="parent"> </div> <div id="container"> <p id="item2">항목 2</p> <p id="item1">항목 1</p> </div>
    • html

4. 왜 이런 동작이 가능할까?

  • DOM과 메모리의 분리: DOM은 브라우저가 관리하는 트리 구조이고, JavaScript 변수는 JavaScript 엔진이 관리하는 메모리 공간에 저장됩니다. .remove()는 DOM 트리에서 노드를 제거하지만, JavaScript 변수가 그 노드를 참조하고 있다면 메모리에서 노드가 사라지지 않아요.
  • 가비지 컬렉션(Garbage Collection): JavaScript에서 변수가 더 이상 노드를 참조하지 않으면(예: item1 = null로 설정), 가비지 컬렉터가 해당 노드를 메모리에서 정리합니다. 하지만 변수가 참조를 유지하는 한 노드는 메모리에 남아 있어요.

추가 확인:

javascript

접기자동 줄바꿈복사

item1.remove(); *// DOM에서 제거* console.log(item1.textContent); *// "항목 1" 출력 → 노드 자체는 메모리에 남아 있음* item1 = null; *// 참조 해제 → 이제 가비지 컬렉터가 노드를 정리할 수 있음*

5. 비슷한 상황: prepend, append 등으로 이동할 때

prepend, append, before, after로 노드를 이동할 때도 비슷한 원리가 적용됩니다. DOM에서 노드를 이동하면 원래 위치에서 자동으로 제거되지만, 노드 자체는 여전히 메모리에 존재하며 JavaScript 변수로 접근 가능해요.

예시:

javascript

접기자동 줄바꿈복사

const item1 = document.getElementById('item1'); const container2 = document.getElementById('container2'); container2.append(item1); *// item1이 container2로 이동 (원래 위치에서 자동 제거)* console.log(item1); *// 여전히 item1 변수로 접근 가능*

요약

  • .remove()는 노드를 DOM 트리에서 제거하지만, JavaScript 변수가 그 노드를 참조하고 있다면 메모리에는 남아 있어요.
  • 메모리에 남아 있는 노드는 변수로 접근 가능하며, append, prepend 같은 메서드로 다시 DOM에 추가할 수 있어요.
  • 변수가 더 이상 노드를 참조하지 않으면(예: item1 = null), 가비지 컬렉터가 메모리에서 노드를 정리합니다.

 

728x90
반응형

'IT공부' 카테고리의 다른 글

[지식루프 IT공부] 객체(Object)란 무엇인가?  (0) 2025.04.02
[지식루프 IT공부] HTML속성과 DOM 프로퍼티 차이  (1) 2025.03.25
[지식루프 IT공부] prepend, append, before, after의 차이  (0) 2025.03.25
맥북 화면분할 단축키  (0) 2025.03.25
[지식루프 IT공부] innerHTML이 위험한 이유  (0) 2025.03.24

'IT공부'의 다른글

  • 현재글[지식루프 IT공부] .remove, .prepend, .append, .before, .after 를 이용한 노드 삭제, 이동방법

관련글

티스토리툴바