JavaScript / Object / .innerText, .innerHTML

.innerText

.innerText은 특정 요소의 텍스트를 가져오거나, 특정 요소의 텍스트를 변경한다.

문법 1 - 내용 가져오기

  • element의 내용을 가져온다.
element.innerText
  • id의 값이 xyz인 요소의 내용을 변수 jb에 저장한다.
var jb = document.getElementById( 'xyz' ).innerText;

예제 1

  • id의 값이 jb인 요소의 텍스트를 가져와서 출력한다.
  • 태그 등은 제외한 텍스트만 가져온다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      body {
        font-family: Consolas, monospace;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p id="jb"><span style="color: red;">Hello</span> World!</p>
    <script>
      var jbText = document.getElementById( "jb" ).innerText;
      document.write( jbText );
    </script>
  </body>
</html>

문법 2 - 내용 변경하기

  • 선택한 element의 내용을 content로 바꾼다.
element.innerText = content
  • id의 값이 xyz인 요소의 내용을 ABC로 바꾼다.
document.getElementById( 'xyz' ).innerHTML = 'ABC';

예제 2

  • id의 값이 jb인 요소의 텍스트를 Goodbye World!로 변경한다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      body {
        font-family: Consolas, monospace;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p id="jb"><span style="color: red;">Hello</span> World!</p>
    <script>
      document.getElementById( "jb" ).innerText = 'Goodbye World!';
    </script>
  </body>
</html>

.innerHTML

.innerHTML은 특정 요소의 내용을 가져오거나, 특정 요소의 내용을 변경한다. .innerText와의 차이점은 HTML 태그 등도 포함한다는 것이다.

문법 1 - 내용 가져오기

  • element의 내용을 가져온다.
element.innerHTML
  • id의 값이 xyz인 요소의 내용을 변수 jb에 저장한다.
var jb = document.getElementById( 'xyz' ).innerHTML;

예제 1

  • id의 값이 xyz인 요소의 내용을 가져와서 출력한다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p>Lorem</p>
    <ul id="xyz">
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
    <hr>
    <script>
      var jb = document.getElementById( 'xyz' ).innerHTML;
      document.write( '<ul>' + jb + '</ul>' );
    </script>
  </body>
</html>

문법 2 - 내용 변경하기

  • 선택한 element의 내용을 content로 바꾼다.
element.innerHTML = content
  • id의 값이 xyz인 요소의 내용을 ABC로 바꾼다.
document.getElementById( 'xyz' ).innerHTML = 'ABC';

예제 2

  • id의 값이 xyz인 요소의 내용을 바꾼다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p>Lorem</p>
    <ul id="xyz">
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
    <script>
      document.getElementById( 'xyz' ).innerHTML = '<li>Dolor</li>';
    </script>
  </body>
</html>

Related Posts

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 / 함수 / 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 / document.getElementsByTagName() / 특정 태그를 가진 요소 가져오는 메서드

JavaScript / Object / document.getElementsByTagName() / 특정 태그를 가진 요소 가져오는 메서드

.getElementsByTagName() .getElementsByTagName()는 특정 태그를 가진 모든 요소를 선택합니다. 선택된 요소는 유사 배열 객체로 반환됩니다. 문법 1 document.getElementsByTagName( 'tagname' ) 예를 들어 p 태그를 가진 첫번째 요소를 선택하려면 다음과 같이 합니다. document.getElementsByTagName( 'p' ) 예제 1 문서에서 p 태그를 가진 두번째 요소를 jb라는 변수에 넣고, 몇 가지 정보를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...

JavaScript / Object / String.match() / 정규표현식에 맞는 문자열을 찾아 가져오는 메서드

JavaScript / Object / String.match() / 정규표현식에 맞는 문자열을 찾아 가져오는 메서드

.match() .match()는 정규표현식에 맞는 문자열을 찾아서 배열 객체로 반환합니다. 문법 string.match( regexp ) 만약 정규표현식에 맞는 문자열이 없다면 null을 반환합니다. 예제 Lorem Ipsum Dolor 문자열에서 Lo가 있는지, Lo를 포함한 단어가 있는지, Loi가 있는지 검색하고, 그 결과를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | match</title> </head> ...

JavaScript / JavaScript를 HTML 문서에 삽입하는 방법

JavaScript / JavaScript를 HTML 문서에 삽입하는 방법

HTML 문서에 직접 삽입 HTML 문서 안에 <script> 태그를 만들고, 그 안에 사이에 코드를 넣는 방법입니다. <script> alert ("Hello"); </script> 이 방법은 몇 개의 페이지에 JavaScript를 사용하거나, JavaScript 코드가 짧은 경우에 유용합니다. 스크립트 파일을 만든 후 불러오기 JavaScript 코드를 담은 파일을 만든 후 HTML 문서에 연결시키는 방법입니다. 다음과 같은 내용의 파일을 만들고 hello.js라는 이름으로 저장합니다. (스크립트 파일의 ...

JavaScript / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수

JavaScript / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수

isFinite() isFinite()은 매개변수가 유한값인지 검사하는 함수입니다. 문법 isFinite( value ) value : 검사할 값을 입력합니다. 유한한 숫자이면 true, 무한한 숫자 또는 숫자가 아니면 false를 반환합니다. 예제 123.123은 유한한 숫자이므로 true를 반환합니다. Infinity는 무한한 숫자이므로 false를 반환합니다. Not a Number는 문자이므로 false를 반환합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / Object / document.querySelector() / 특정 CSS 선택자를 가진 첫 번째 요소를 선택하는 메서드

JavaScript / Object / document.querySelector() / 특정 CSS 선택자를 가진 첫 번째 요소를 선택하는 메서드

.querySelector() .querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것입니다. 문법 document.querySelector( 'selector' ) 예를 들어 document.querySelector( '.xyz' ) 는 클래스 값이 xyz인 첫번째 요소에 접근합니다. 예제 1 클래스 값으로 abc를 갖는 요소 중 첫 번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...

JavaScript / Object / Array.push(), Array.pop(), Array.unshift(), Array.shift() - 배열에 원소 추가/제거 하기

JavaScript / Object / Array.push(), Array.pop(), Array.unshift(), Array.shift() - 배열에 원소 추가/제거 하기

.push(), .pop(), unshift(), shift() .push()는 배열의 맨 끝에, .unshift()는 배열의 맨 앞에 원소를 추가합니다. .pop()은 마지막 원소를, .shift()는 맨 앞의 원소를 제거합니다. 예제 네 가지 속성을 비교하는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <script> ...

JavaScript / Object / document.getElementById()

JavaScript / Object / document.getElementById()

.getElementById() .getElementById()는 id의 값으로 특정한 값을 가진 요소를 가져옵니다. 문법 document.getElementById( 'id' ) id에는 가져오려는 요소의 id의 값을 넣습니다. 예를 들어 var jb = document.getElementById( 'xyz' ); 는 id의 값이 xyz인 요소를 가져와서 변수 jb에 저장합니다. 예제 id의 값이 ab인 요소를 가져와서 몇 가지를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성

JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성

Math.random() Math.random()는 난수(랜덤 숫자)를 만듭니다. 문법 Math.random() 0.673172894273546와 같은 0 이상 1 미만의 난수를 만듭니다. 예제 1 - 난수 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...