[JavaScript ]요소 추가하기 (createElement,TextNode, appendChild)

Study/JS

by 개발성훈 2020. 7. 16. 18:52

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

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

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

.createElement( 'h1' )

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

<h1></h1>

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

.createTextNode( 'My Text' )

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

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

다음은 Click이라는 텍스트를 가진 button 요소를 추가하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
      var jbBtn = document.createElement( 'button' );
      var jbBtnText = document.createTextNode( 'Click' );
      jbBtn.appendChild( jbBtnText );
      document.body.appendChild( jbBtn );
    </script>
  </body>
</html>

각 줄의 의미는 다음과 같습니다.

var jbBtn = document.createElement( 'button' );

button 요소를 만들고 jbBtn에 저장합니다.

var jbBtnText = document.createTextNode( 'Click' );

Click이라는 텍스트를 만들고 jbBtnText에 저장합니다.

jbBtn.appendChild( jbBtnText );

jbBtn에 jbBtnText를 넣습니다.

document.body.appendChild( jbBtn );

jbBtn을 body의 자식 요소로 넣습니다.

'Study > JS' 카테고리의 다른 글

[Javascript] event.preventDefault / preventDefault란? (0)	2020.07.16
[JavaScript] 삼항연산자 (0)	2020.07.16
[Javascript] classList(add, remove, contains, toggle) (0)	2020.07.15
[Javascript] setInterval, setTimeout (0)	2020.07.14
자바스크립트 특징 (0)	2020.06.03