[JavaScript] 텍스트 요소 추가하기

 

누적 방식 생략.

1. appendChild

- 가장 기본적인 방

- 기존 내용은 유지, 새로운 요소 추가 가능

- DOM 요소를 생성하고, 이를 부모 요소에 추가하는데 사용

- Dom 요소만 추가 가능.

function addtext(event) {

  event.preventDefault();

  // 새로운 텍스트 노드 생성

  const newText = document.createElement("p");

  newText.innerText = "Hello";

  // 기존 내용에 추가

  result.appendChild(newText);

}

 

---

2. append

- appendChild와 비슷하지만, 더 유연

- 텍스트 노드와 DOM 요소 모두 추가 가능

- 여러 요소를 한번에 추가 가능

function addtext(event) {

  event.preventDefault();

  result.append('Hello', document.createElement('br')); // 텍스트와 요소 추가

}

---

3. insertAdjacentHTML

- 특정 위치에 HTML 콘텐츠 추가

- 텍스트나 HTML을 더 유연하게 삽입 가능

beforebegin: 요소 바로 앞에 추가

afterbegin: 요소의 첫번째 자식으로 추가

beforeend: 요소의 마지막 자식으로 추가

afterend: 요소 바로 뒤에 추가

function addtext(event) {

  event.preventDefault();

  result.insertAdjacentHTML('beforeend', '<p>Hello</p>'); // 마지막에 추가

}

---

4. insertAdjacentElement

- HTML이 아닌, DOM 요소를 삽입

- 원하는 위치를 지정하여 추가 가능

function addtext(event) {

  event.preventDefault();

  const newText = document.createElement('p');

  newText.innerText = 'Hello';

  result.insertAdjacentElement('beforeend', newText); // 마지막 자식으로 추가

}

 

---

5. prepend

- append와 비슷하나, 요소의 첫 번째 자식으로 추가

function addtext(event) {

  event.preventDefault();

  result.prepend('Hello ', document.createElement('br')); // 텍스트를 맨 앞에 추가

}

 

 

 

 

---

메서드	특징	예시
appendchild	DOM 요소만 추가 가능, 가장 기본적인 방식	기존 DOM 조작이 필요한 경우
append	텍스트와 요소 모두 추가 가능	간단하게 텍스트나 요소를 추가할 때
insertAdjacentHTML	특정 위치에 HTML을 삽입 가능	정교하게 삽입 위치를 조정해야 할 때
insertAdjacentElement	DOM 요소를 특정 위치에 삽입	요소 삽입 위치를 정확히 지정해야 할 때
prepend	첫 번째 자식으로 삽입	콘텐츠를 맨 앞으로 추가해야 할 때