JS document.createElement() 메서드 간단 정리

JS document.createElement() 메서드 간단 정리

 

 

지난 포스팅에서 document.createElement() 메서드를 사용하여 동적으로 HTML 요소를 생성하는 기능과 방법을 살펴보았습니다. createElement() 메서드 괄호 안에 태그 이름만 넣어주면 끝입니다! 참 쉽죠?

 

JS로 HTML 엘리먼트 생성하기

JS로 HTML 엘리먼트 생성하기

 

 

 

createElement() 메서드로 기본 사용문법

createElement() 메서드의 기본 사용문법은 아래와 같습니다. 일반적인 함수를 이용하는 방법과 유사합니다.

document.createElement(tagName)

 

다만, tagName이라고 쓰여진 부분에 태그 이름을 넣을 때는 string 자료형이기 때문에 꼭 "따음표" 또는 '작은 따옴표' 사이에 넣어준다는 것을 기억해줘야 합니다.

 

그냥, tagName 자리에 HTML 엘리먼트 태그 이름을 넣으면 진짜로 태그를 형성해서 돌려주는 함수다~ 라고 생각하면 됩니다. createElement() 메서드를 통해 새로운 요소가 만들어지고 나면, 해당 엘리먼트는 메모리에 로드됩니다. HTML  페이지에 추가하거나 원하는 작업을 하는 데 수월하게 사용하기 위해, '변수'에 담아 사용하는 게 일반적입니다.

예를 들어, div 요소를 만들어 웹 페이지에 추가하는 방법은 다음과 같습니다.

const newDiv = document.createElement('div');
document.body.appendChild(newDiv);

 

위의 예제 코드는 새로운 div 요소를 만들고, document.body에 추가합니다. 이렇게하면 새로운 div 요소가 페이지의 끝에 추가됩니다. 정말 신기할 따름입니다.

 

저는 그 동안 이 메서드는 잘 사용할 일이 없었는데, 최근에 사용해보게 되면서 아주 쏠쏠한 재미를 느끼고 있습니다. 그래서 반복적이긴 하지만 복습차원에서 포스팅을 한번 더 정리해보고 있습니다.

 

 

 

createElement() 메서드로 버튼 만들기

 

createElement()의 사용법을 알았으니, 이젠 별걸 다 만들 수 있을 것 같습니다. 다른 예제를 들어봅시다.

이번에는 button 요소를 만들어 클릭 이벤트를 추가하는 방법을 살펴보기로 합니다.

const newButton = document.createElement('button');
newButton.textContent = '당장 클릭!';
newButton.addEventListener('click', () => {
  console.log('클릭되었습니다!');
});
document.body.appendChild(newButton);

<button>이 하나 만들어졌습니다.

버튼을 클릭하면, Console 창에 메시지가 찍힙니다

 

위의 코드는 새로운 button 요소를 만들고, 해당 요소에 텍스트 내용을 추가하고, 클릭 이벤트를 추가합니다. 이렇게하면 사용자가 새로 만든 버튼을 클릭할 때마다 콘솔에 "클릭되었습니다!" 메시지가 표시됩니다.

 

와.. 정말 HTML 마크업을 하나도 하지 않고서도, JS 만으로도 이런 일을 할 수 있다는 게 참 놀랍습니다.

이런 게 가능하기 때문에, 그 수 많은 Javascript 라이브러리나 프레임워크가 탄생할 수 있었겠죠?

 

 

 

createElement() 메서드로 리스트 만들기

 

이거 재미있군요! 내친김에 ul로도 한번 해보기로 합니다. 

const myList = document.createElement("ul");

const listItem1 = document.createElement("li");
listItem1.textContent = "Item 1";
myList.appendChild(listItem1);

const listItem2 = document.createElement("li");
listItem2.textContent = "Item 2";
myList.appendChild(listItem2);

document.body.appendChild(myList);

ul 태그와 li 태그가 생성되고 리스트가 만들어졌습니다.

 

버튼의 이름을 변경하려면, textContent 프로퍼티를 사용하여 각 li 요소의 내용을 설정합니다.
(이전 포스팅에서는 textContext 대신 innerHTML을 사용했었습니다. 일단 둘 다 비슷한 거라 생각하고 넘어가주세요.)

그리고 appendChild 메서드를 사용하여 li 엘리먼트를 ul의 자식으로 추가하고, 리스트가 모두 구성이 되면 최종적으로 ul 요소를 body 요소에 appendChild 메서드로 붙여 넣어줬습니다.

 

이와 같은 방식을 잘 익혀두고 활용한다면, 동적으로 HTML문서를 다루는 데에 아주 강력한 무기가 될 수 있을 것 같다는 생각이 듭니다. 어찌보면, jQuery, React 등의 인기 있는 JS 라이브러리들도 이런 기초적인 바탕 위에서 탑을 쌓아갔던 것이겠죠?

 

 

 

마치며

 

그런데 뭔가 좀 불편하게 느껴지는 점도 있습니다. 

 

document.createElement는 HTML 엘리먼트를 동적으로 생성하는 가장 간단하고 기본적인 전통의 방법이긴 한데, 생성된 엘리먼트는 기본적으로 스타일이나 속성을 가지지 않은, 날것의 상태 그대로입니다.

 

따라서 이러한 스타일 및 속성을 추가해주어야하는데, 이를 위해서는 또 다른 기능을 하는 setAttribute 메서드를 사용해서 각 엘리먼트들의 속성을 설정할 수 있습니다. 그리고 CSS 스타일은 style 프로퍼티를 사용하여 설정할 수 있습니다.

 

다량의 코딩을 통해 HTML 문서를 작성하고 CSS 스타일을 관리할 때는, 여전히 HTML을 마크업하고 CSS로 스타일링을 하는 게 생산적일 것 같습니다. 하지만, 서버에서 내려 받은 정보를 뿌려준다던지 하는 방식으로 HTML 페이지가 "동적"으로 동작을 해야 하는 경우라면, 역시나 Javascript가 갑이긴 할 것 같습니다.

여담이긴 하지만, createElement()메서드는 getElementById()로 자바스크립트 DOM 조작을 처음 배울 때 만큼이나 상당히 흥미로운 주제를 전해주는 메서드임에는 틀림이 없는 것 같습니다.

 

오늘도 즐거운 코딩하세요!

즐거운 코딩생활, 즐코딩

KINcoding