[javascript] 요소 생성, 추가, 삭제 관련 메서드

요소 생성

createElement('태그')

• 지정한 태그 이름을 가진 새로운 HTML 요소를 생성
• 동작 방식:
  • DOM에 바로 추가되지 않고, 메모리 상에 존재
  • 이 메소드로 생성한 노드는 appendChild, append 등을 통해 DOM에 삽입해야 화면에 표시됨
• 사용 시기:
  • 자바스크립트로 동적으로 요소를 만들고 싶을 때
  • 이벤트 리스너나 속성 등을 설정하고 DOM에 넣고 싶을 때

// [문법]
document.createElement('태그명')

document.createElement('div');
div.textContent = 'new div';

---

createTextNode('텍스트')

• 순수 텍스트 노드를 생성
• 동작 방식:
  • <p>안녕</p> 중에서 "안녕" 같은 텍스트만 따로 만들 때 사용
  사용 시기:
  • HTML 태그 없이 텍스트만 삽입하고 싶을 때

// [문법]
document.createTextNode('텍스트')

const parent = document.querySelector('.box');
const text = document.createTextNode('추가텍스트');
parent.appendChild(text);

---

요소 삽입

appendChild(노드)

• 요소의 마지막 자식으로 노드를 추가
• 동작 방식:
  • 부모 노드에서 호출하며, 인자는 반드시 노드(Node) 여야 함.
  • DOM에서 다른 위치에 있던 노드를 넘기면 이동(복사 X).
  • 한 번에 하나의 노드만 추가 가능
• 주의점:
  • 노드 객체만 인자로 받기 때문에, 일반 문자열이나 HTML 문자열은 사용할 수 없음.
  • 따라서 createElement 또는 creatTextNode를 사용해야 함

// [문법]
부모.appendChild(자식노드)

const parent = document.querySelector('.box');
const p = document.createElement('p');
p.textContent = '추가된 문단';
parent.appendChild(p);

---

append(노드/문자열)

• 요소의 마지막 자식으로 노드 또는 문자열을 추가
• 동작 방식:
  • appendChild보다 유연하게 동작.
  • 여러 개를 한꺼번에 넣을 수 있음.

// [문법]
부모.append(노드 또는 문자열, ...)

const parent = document.querySelector('.box');
parent.append('문자열', document.createElement('span'));

prepend(노드/문자열)

• 요소의 첫 번째 자식으로 삽입
• 동작 방식:
  • append와 유사.
  • 문자열과 노드 모두 받을 수 있음

// [문법]
부모.prepend(노드 또는 문자열, ...)

const parent = document.querySelector('.box');
parent.prepend('요소의 첫번째로 추가', '추가');

---

insertBefore(새노드, 기준노드)

• 기준 노드 앞에 새 노드를 삽입
• 노드 객체가 기준이 되어 삽입
• 노드를 삽입 전 이벤트를 미리 연결 할 수 있음
• DOM을 좀 더 세밀하게  조작하고 싶을 경우, insertAdjacentHTML('afterbegin',..) 보다 insertBefore가 적합

// [문법]
부모.insesrtBefore(새노드, 기준노드)

const box = document.querySelector('.box');
const p = document.getElementsByTagName('p')[0];

const newNode = document.createElement('p');
newNode.textContent = 'insertBefore';

// insertBefore 실행 전 이베트를 미리 연결 가능
newNode.addEventListener('click', () => {
  console.log(1);
});


box.insertBefore(newNode, p);

 

---

insertAdjacentHTML('위치', 'HTML문자열')

• HTML 문자열을 해석해서 DOM 요소로 정해진 위치에 삽입
• 삽입 위치를 지정하는 "position" 인자가 핵심
• 이벤트 연결 : insertAdjacentHTML은 문자열을 HTML로 바꿔 DOM에 삽입하므로, 삽입 전에는 요소가 존재하지 않음. 따라서 이벤트는 반드시 삽입 후에 연결해야 합니다.

// [문법]
요소.insertAdjacentHTML(위치, 'html 문자열')

 

위치 값	위치
beforebegin	형제 요소로 앞에 추가
afterbegin	자식 요소로 첫 위치
beforeend	자식 요소로 끝 위치
afterend	형제 요소로 뒤에 추가

const box = document.querySelector('.box');

box.insertAdjacentHTML('beforebegin', '<p>beforebegin</p>');

box.insertAdjacentHTML('afterbegin', '<p class="afterbegin">afterbegin</p>');

box.insertAdjacentHTML('beforeend', '<p>beforeend</p>');

box.insertAdjacentHTML('afterend', '<p>afterend</p>');

// 이벤트 선언은 반드시 isertAdjacentHTML 후 선언
document.querySelector('.afterbegin').addEventListener('click', ()=> console.log(2))

---

요소 삭제

remove()

• 해당 요소 스스로 DOM에서 제거됨
• 부모가 없어도 자신을 제거할 수 있음

// [문법]
요소.remove()

const box = document.querySelector('.box');
box.remove();

---

removeChild(노드)

• 부모가 자식 요소를 삭제
• 반드시 부모 요소에서 호출해야 함

// [문법]
부모.removeChild(자식요소)

const parent = document.getElementById('list');
const child = parent.querySelector('li');
parent.removeChild(child);

---

removeAttribute(속성명)

• 요소에서 특정 속성을 제거할 때 사용
• 주의사항
  • removeAttribute()는 HTML 속성만 제거 (예: disabled, readonly, required, placeholder, value, type, class, id, 등)
  • DOM 속성(예: input.value = "test")은 제거되지 않으며, 여전히 작동할 수 있음

// [문법]
요소.removeAttribute(속성명)

<input type="text" value="text" disabled>
<button type="button" onclick="unlock()">입력잠금 해제</button>

<script>
const btn = document.querySelector('button');
const input = document.querySelector('input');

const unlock = () => input.removeAttribute('disabled');
</script>

HTML 속성과 DOM 속성의 차이

 

구분	HTML 속성 (attribute)	DOM 속성 (property)
정의 위치	HTML 코드 안에 써놓은 값	브라우저가 메모리에 만든 객체의 속성
초기값	사용자가 작성한 값	HTML 속성을 바탕으로 초기 생성됨
수정 시점	setAttribute(), removeAttribute()로 조작	input.value = ... 으로 조작
연결 상태	초기에는 DOM 속성과 연결됨	그 이후엔 독립적으로 작동

---

DOM 속성은 제거되지 않으며, 여전히 작동할 수 있는 예

1, 코드가 파싱되면 브라우저는 다음처럼 동작

<input type="text" value="hello" id="myInput">

• input.getAttribute("value") → "hello"
• input.value → "hello" (초기에는 같음)

2. JS로 value를 바꾸면

const input = document.getElementById('myInput');

input.value = "world";  // DOM 속성 변경 (사용자가 실제로 보는 값)

• input.value → "world" (실제 입력값이 바뀜)
• input.getAttribute("value") → 여전히 "hello"

 이 시점에서 DOM 속성과 HTML 속성은 서로 달라짐

3.  removeAttribute() 사용

input.removeAttribute("value"); // HTML 속성만 제거(초기값 제거, input.value에는 영향 없음

• input.getAttribute("value") → null (속성 제거됨)
• input.value → "world" (여전히 유지됨!)

즉, removeAttribute("value")는 HTML에 있는 속성을 지우는 것일 뿐,
이미 메모리에서 작동 중인 DOM 속성(input.value)에는 아무 영향도 주지 않음

---

---

 

innerHTML = ""

• 내부 자식 요소들을 모두 초기화할 때 사용
• 자식 요소, 텍스트 등 모든 내용이 제거됨
• 주의 : 기존에 있던 이벤트 리스너도 함께 사라질 수 있음

// [문법]
부모.innerhTML = "";

const parent = document.getElementById('list');
parent.innerHTML = "";

---

요소 교체

replaceWith(새노드 또는 텍스트)

• 자신을 새로운 노드 또는 텍스트로 교체
• 자신을 기준으로 교체가 일어남

// [문법]
요소.replaceWith(새로운 노드 또는 문자열)

const box = document.querySelector('.box');
const newArea = document.createElement('p');
box.replaceWith(newArea);

---

replaceChild(새노드, 기준노드)

• 부모가 특정 자식 노드를 새 노드로 교체
• insertBefore와 함께 사용될 때가 많음

// [문법]
요소.replaceChild(새로운노드, 기존노드);

const box = document.querySelector('.box');
const oldNode = document.querySelector('.box p');
const newNode = document.createElement('p');
box.replaceChild(newNode, oldNode);