JavaScript/DOM

[JavaScript]HTML 요소 생성하는 방법

DevStory 2022. 11. 15.

HTML 요소 생성하는 방법

이번 포스팅은 JavaScript에서 HTML 요소를 생성 후 DOM 트리에 추가하는 방법을 소개합니다.

가장 기본적인 방법은 document 객체의 createElement() 메서드를 사용하는 것입니다.

div 태그를 생성하고 생성된 태그를 변수에 할당하는 방법은 아래와 같습니다.

const newDivElement = document.createElement('div');

새로운 div 태그를 생성했지만, DOM에 배치하지 않았습니다. 따라서, 웹 페이지는 변경되지 않습니다.

현재, div 태그에는 어떠한 텍스트도 포함되어 있지 않으며 스타일도 없습니다. 텍스트, 스타일, id 속성을 적용하고 싶다면 아래 방법을 따라 합니다.

텍스트를 적용하는 방법

태그 내부에 텍스트를 적용하고 싶다면, textContent 프로퍼티의 값을 변경합니다.

const newDivElement = document.createElement('div');
newDivElement.textContent = 'Hello!';

스타일을 적용하는 방법

태그에 스타일을 적용하고 싶다면, className 프로퍼티의 값을 변경하거나 classList 프로퍼티의 add() 메서드에 값을 전달합니다.

const newDivElement = document.createElement('div');
newDivElement.className  = 'div-style!';
// 또는
newDivElement.classList.add('div-style!');

id를 적용하는 방법

id 속성을 적용하고 싶다면, id 프로퍼티의 값을 변경합니다.

const newDivElement = document.createElement('div');
newDivElement.id  = 'div-1';

위에서 언급했듯이 div 태그를 생성했지만, 아직 DOM에 배치하지 않았습니다. body 태그 하위에 추가하고 싶은 경우 document.body 프로퍼티에서 appendChild() 메서드를 호출합니다.

아래는 HTML 마크업입니다.

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta charset="UTF-8" />
</head>

<body>
  <script src="script.js"></script>
</body>

</html>

아래는 JavaScript 코드입니다.

const newDivElement = document.createElement('div');
newDivElement.textContent = 'Hello!';

document.body.appendChild(newDivElement);

JavaScript 코드가 적용된 웹 페이지입니다.

또 다른 방법으로 Object 객체의 assign() 메서드를 사용하여 HTML 요소를 추가할 수 있습니다.

createElement() 메서드를 사용하는 방법과 유사하지만, HTML 태그에 설정해야 하는 속성(id, className, textContent 등)이 많은 경우 코드가 간결하다는 장점이 있습니다.

아래는 body 태그 하위에 id가 "div-1"이고 "Hello"라는 문자열을 표시하는 div 태그를 추가하는 예제입니다.

document.body.appendChild(
  Object.assign(
    document.createElement('div'),
    { id : 'div-1'},
    { textContent: 'Hello'}
  )
)

JavaScript에서 문자열을 생성하는 한 가지 방법인 백틱(``)을 활용하여 HTML 요소를 추가할 수 있습니다.

다음 세 개의 div 태그를 body 태그 하위에 추가하려고 합니다.

<div id='div-1'>div-1 Hello</div>
<div id='div-2'>div-2 Hello</div>
<div id='div-3'>div-3 Hello</div>

appendChild() 메서드가 아닌 innerHTML 프로퍼티를 사용합니다.

document.body.innerHTML = `
  <div id='div-1'>div-1 Hello</div>
  <div id='div-2'>div-2 Hello</div>
  <div id='div-3'>div-3 Hello</div>
`;

innerHTML 프로퍼티를 사용하여 HTML 요소를 추가하면, 기존 HTML 요소를 덮어버릴 수 있으므로 상황에 맞게 사용하시길 바랍니다.

[JavaScript]HTML 태그 안의 텍스트 가져오기 및 설정 (0)	2022.11.21
[JavaScript]HTML 요소 추가하는 방법 (0)	2022.11.21
[JavaScript]형제 노드 가져오는 방법 (0)	2022.11.15
[JavaScript]부모, 자식 노드 가져오는 방법 (0)	2022.11.15
[JavaScript]querySelectorAll 반복문 사용 방법 (0)	2022.11.15