JavaScript / 요소 추가하기 / .createElement(), .createTextNode(), .appendChild()

자바스크립트를 이용하여 문서에 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의 자식 요소로 넣습니다.

Related Posts

JavaScript / 함수 / eval() / 문자열을 코드로 인식하게 하는 함수

JavaScript / 함수 / eval() / 문자열을 코드로 인식하게 하는 함수

eval() eval()은 문자열을 코드로 인식하게 하는 함수입니다. 문법 eval( string ) 예를 들어 eval( '2+2' ) 는 문자열 2+2가 아니라 계산한 결과 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jb = '2+2'; document.write( '<p>' + jb + '</p>' ); document.write( '<p>' + eval( jb ) + '</p>' ); </script> </body> </html>

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

.concat()  .concat()은 문자열을 이어 붙이는 메서드입니다. 문법 string1.concat( ) string1은 필수 요소, string2 등은 선택 요소입니다. 인수가 문자열이 아닌 경우 먼저 문자열로 변환한 다음 string1에 연결합니다. 예를 들어 'ab'.concat( 'cd', 'ef' ) 는 abcdef입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

JavaScript / 구문(Statement) 넣는 방법

JavaScript / 구문(Statement) 넣는 방법

자바스크립트는 줄바꿈을 하면 구문(Statement)이 종료된 것으로 봅니다. var jb1 = 'Lorem' var jb2 = 'Ipsum' 하지만, 구문이 완성되지 않았다면 다음 줄까지 해석합니다. 즉 var jb1 = 'Lorem' 과 var jb1 = 'Lorem' 은 같습니다. 구문이 종료되었음을 명확히 표시할 때는 세미콜론(;)을 사용합니다. var jb1 = 'Lorem'; var jb2 = 'Ipsum'; 세미콜론 사용은 선택사항이지만, 한 줄에 여러 구문을 쓸 때는 구문과 구문 사이에 꼭 ...

JavaScript / Object / Array.length / 배열의 길이 반환하는 속성

JavaScript / Object / Array.length / 배열의 길이 반환하는 속성

.length .length는 배열의 길이를 반환하는 속성입니다. 마지막 원소의 인덱스 값보다 1 큰 수를 반환합니다. 배열에 속한 원소의 개수와는 의미가 다릅니다. 문법 array.length 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, sans-serif; font-style: italic; } </style> </head> <body> <script> var jbAry1 = ; document.write( '<p>jbAry1.length : ' ...

JavaScript / Object / Location / URL 정보 가져오는 객체

JavaScript / Object / Location / URL 정보 가져오는 객체

location location은 URL 정보를 가져오는 객체입니다. URL 전체 또는 일부의 정보를 가져올 수 있는데, 대표적인 것들은 다음과 같습니다. location location.host location.hostname location.href location.pathname location.protocol 예제 URL이 https://example.codingfactory.net/_lab/javascript.html 일 때, 각 객체 속성이 어떤 값을 가져오는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> h1 { ...

JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드

JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드

.removeAttribute() .removeAttribute()는 요소의 속성을 제거하는 메서드입니다. 문법 element.removeAttribute( attributename ) 예를 들어 document.getElementsByTagName( 'h1' ).removeAttribute( 'class' ); 는 문서의 첫번째 h1 요소의 class 속성을 제거합니다. 예제 첫번째 h1 요소의 class 속성을 제거해서 글자색이 검정색이 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } .abc { color: red; } </style> </head> <body> <h1 class="abc">Lorem ...

JavaScript / Object / Array.slice() / 배열의 일부분을 선택하여 새로운 배열을 만드는 속성

JavaScript / Object / Array.slice() / 배열의 일부분을 선택하여 새로운 배열을 만드는 속성

.slice() .slice()는 배열의 일부분을 선택하여 새로운 배열을 만듭니다. 문법 array.slice( start, end ) start와 end에는 숫자가 들어갑니다. 배열의 start에 해당하는 요소부터 end 바로 전의 요소까지를 선택하여 새로운 배열을 만듭니다. 예를 들어 jbAry.slice( 2, 5 ); 는 jbAry 배열의 3번째 요소부터 5번째 요소까지 선택합니다. end에 값이 없으면 해당 배열의 마지막 요소까지 선택합니다. 값이 음수면 마지막 요소를 기준으로 선택합니다. 예제 <!doctype html> <html ...

JavaScript / 객체 / 객체 생성하기

JavaScript / 객체 / 객체 생성하기

객체 생성 방법 1 var jb = { 'a':100, 'b':200, 'c':300 }; 객체 생성 방법 2 var jb = {}; jb = 100; jb = 200; jb = 300; 객체 생성 방법 3 var jb = new Object(); jb = 100; jb = 200; jb = 300; 객체 생성 방법 4 var jb = new Object(); jb.a = 100; jb.b = 200; jb.c = 300;

JavaScript / 배열(Array) / 선언하기

JavaScript / 배열(Array) / 선언하기

배열 선언하는 방법 방법 1 jbAry라는 배열을 만듭니다. var jbAry = new Array(); 값을 배정합니다. jbAry = 'Lorem'; jbAry = 'Ipsum'; jbAry = 'Dolor'; 방법 2 var jbAry = ; 방법 3 var jbAry = new Array( 'Lorem', 'Ipsum', 'Dolor' ); 예제 배열에 값을 배정한 후 차례대로 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / String.substr() / 문자열 추출하는 메서드

JavaScript / Object / String.substr() / 문자열 추출하는 메서드

.substr() .substr()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substr( start, length ) start로 시작 위치를 정하고 length로 잘라낼 문자열의 길이를 정합니다. 예를 들어 var str = '123456789'; document.write( '<p>substring( 1, 5 ) : ' + str.substr( 1, 5 ) + '</p>' ); 는 23456을 출력합니다. start 값은 필수이고, length를 지정하지 않으면 문자열의 끝까지를 가져옵니다. 예제 <!doctype html> <html lang="ko"> ...

JavaScript 강좌