Home
JavaScript

HTML 요소 추가하는 방법 - .createElement()

JavaScript로 HTML 요소 추가하는 방법 자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립트 속성은 다음과 같습니다.

자바스크립트로 HTML 요소 추가하는 방법

자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립트 속성은 다음과 같습니다.

  • .createElement()
  • .createTextNode()
  • .appendChild()

 

기본형

createElement

.createElement()는 요소를 만듭니다. 예를 들어

.createElement( 'h1' );

은 다음과 같은 코드를 생성합니다.

<h1></h1>

createTextNode

.createTextNode()는 선택한 요소에 텍스트를 추가합니다.

appendChild

.appendChild()는 선택한 요소 안에 자식 요소를 추가합니다. 예를 들어

.createTextNode( 'My Text' );

는 My Text라는 문자열을 만듭니다.

 

예제

  • 다음은 Click이라는 텍스트를 가진 button 요소를 추가하는 예제입니다.
var Btn = document.createElement( 'button' );
var BtnText = document.createTextNode( 'Click' );
Btn.appendChild( BtnText );
document.body.appendChild( Btn );

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

분석

  • button 요소를 만들고 Btn에 저장합니다.
var Btn = document.createElement( 'button' );
  • Click이라는 텍스트를 만들고 BtnText에 저장합니다.
var BtnText = document.createTextNode( 'Click' );
  • Btn에 BtnText를 넣습니다.
Btn.appendChild( BtnText );
  • Btn을 body의 자식 요소로 넣습니다.
document.body.appendChild( Btn );

Post a Comment