자바스크립트 - createElement, createTextNode 이용하여 버튼 만들기

자바스크립트를 에서 createElement, createTextNode를 이용하여 버튼을 만들어 보겠습니다.

 

먼저 두 가지 함수에 대해서 먼저 알아보겠습니다.

 

createElement

createElement는 지정한 태그 네임을 입력하면 해당 태그의 element를 반환합니다.

이렇게 사용할 수 있습니다.

const btn = document.createElement('button');

 

createTextNode

createTextNode는 텍스트 노드를 반환합니다.

const btnText = document.createTextNode('button');

 

이제 createElement로 만들어준 버튼에 appendChild를 이용하여 텍스트 노드를 넣어줍니다.

  btn.appendChild( btnText );

 

위와 같이 만들면 텍스트가 들어가 있는 버튼을 만들 수 있습니다.

아래 샘플은 while 문을 이용하여 버튼 10개를 만들어 보았습니다.

반응형

 

See the Pen Untitled by powerku (@powerku) on CodePen.