[Javascript] 자바스크립트로 동적 HTML 요소 생성 방법

자바스크립트를 사용하여 HTML 요소를 동적으로 생성하고 관리하는 것은 웹 개발에서 필수적인 기능입니다. 이 글에서는 요소를 생성하고, 부모-자식 관계로 추가하는 방법, 그리고 형제 요소로 추가하는 방법에 대해 설명하겠습니다.

 

 

1. 요소 생성하기 - createElement()

• createElement() 메서드는 새 HTML 요소를 생성합니다.
• 예를 들면 다음과 같이 사용할 수 있습니다.
  • const hello = document.createElement("h1")는 <h1></h1> 요소를 생성합니다.

 

2. 부모-자식 관계로 요소 추가하기: appendChild()와 append()

• appendChild()와 append()는 선택된 객체의 자식 요소로 인수를 추가합니다.

2.1 append()

• 문자열 또는 여러 요소를 한 번에 추가할 수 있습니다.
• 반환값이 없습니다.

const parent = document.createElement('div');
parent.append('append 예시'); // <div>append 예시</div>

const div = document.createElement('div');
const span = document.createElement('span');
const p = document.createElement('p');
document.body.append(div, 'hello', span, p);

2.2 appendChild()

• 오직 요소만을 인수로 받을 수 있으며, 문자열은 인수로 사용할 수 없습니다.
• 한 번에 하나의 요소만 추가할 수 있습니다.
• 추가된 요소를 반환합니다.

const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child); // <div><p></p></div>

2.3 prepend()

• 자바스크립트에서 특정 부모 요소의 가장 앞부분에 새로운 요소나 내용을 추가하는 데 사용됩니다.

부모요소.prepend(추가할요소1, 추가할요소2, ...);

• 부모요소: 새로운 요소나 내용을 추가할 대상 요소.
• 추가할요소: 텍스트, HTML 요소, 또는 노드 객체 등이 될 수 있습니다.

const parent = document.querySelector('#parent');
parent.prepend('새로운 텍스트');
// 결과: parent 요소의 맨 앞에 '새로운 텍스트'가 추가됩니다.

const newElement = document.createElement('div');
newElement.textContent = '새로운 div 요소';
parent.prepend(newElement);
// 결과: parent 요소의 맨 앞에 새로운 div 요소가 추가됩니다.

const anotherElement = document.createElement('span');
parent.prepend(newElement, '텍스트', anotherElement);
// 결과: parent 요소의 맨 앞에 newElement, '텍스트', anotherElement 순으로 추가됩니다.

 

3. 형제 관계로 요소 추가하기

• before()와 after() 메서드를 사용하여 특정 요소의 앞이나 뒤에 새 요소를 추가합니다.

const existingElement = document.querySelector('.some-class');
const newElement = document.createElement('div');
existingElement.before(newElement); // existingElement 앞에 newElement 삽입
existingElement.after(newElement); // existingElement 뒤에 newElement 삽입

 

4. 특정 위치에 요소 삽입하기 - insertBefore()

• insertBefore(b, c)는 부모 요소 내부에서 기준 요소 c 앞에 대상 요소 b를 삽입합니다.
• c가 null일 경우 자식 요소의 끝에 삽입됩니다.

let ele = document.querySelector('.newEle');
let parent = document.querySelector('.parent');
parent.insertBefore(ele, parent.firstChild); // 맨 앞에 삽입

 

결론

자바스크립트를 사용하여 HTML 요소를 동적으로 생성하고 관리하는 방법은 웹 개발에서 매우 중요합니다.

createElement(), appendChild(), append(), prepend(), before(), after(), insertBefore() 등의 메서드를 활용하면 다양한 상황에서 요소를 효율적으로 관리할 수 있습니다.

이러한 기술을 숙지하고 적절히 활용하여 사용자에게 풍부하고 상호작용적인 웹 경험을 제공할 수 있습니다.