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>

같은 카테고리의 다른 글
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 / Math.max(), Math.min()

JavaScript / Object / Math.max(), Math.min()

Math.max(), Math.min() Math.max()는 주어진 값 중에서 최댓값을, Math.min()은 최솟값을 반환합니다. 문법 Math.max( number1, number2, number3, ... ) Math.min( number1, number2, number3, ... ) 예제 1 10, 20, 30 중에서 최댓값과 최솟값을 구합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( '<p>Math.max( 10, 20, 30 ) : ' + Math.max( 10, 20, 30 ) + '</p>' ); document.write( '<p>Math.min( 10, ...

JavaScript / Object / Array.splice() / 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는 속성

JavaScript / Object / Array.splice() / 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는 속성

.splice() .splice()는 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣습니다. 문법 array.splice( start, count ) 예를 들어 jbAry.splice( 1, 2 )는 jbAry  배열의 두번째 값부터 2개를 추출합니다. array.splice( start, count, value1, value2, ... ) 예를 들어 jbAry.splice( 1, 2, 'abc', 'def' )는 jbAry  배열의 두번째 값부터 2개를 추출하고, 그 자리에 abc, def 두 값을 ...

JavaScript / 반복문 / while, do - while, for

JavaScript / 반복문 / while, do - while, for

자바스크립트 반복문에는 while, do - while, for 세가지가 있습니다. while 문법 var i = 0; while ( i < 10 ) { // do something i++; } i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어갑니다. i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 합니다. 만약 i++이 없으면 i의 값이 ...

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 / 다른 페이지로 리다이렉트(Redirect) 하기

JavaScript / 다른 페이지로 리다이렉트(Redirect) 하기

자바스크립트를 이용해서 특정 URL로 접속했을 때 다른 URL로 이동시킬 수 있다. 다른 URL로 이동시키는 것은 window.location.href 를 이용한다. 예를 들어 window.location.href = 'http://www.abc.com/'; 은 웹브라우저로 접속했을 때 http://www.abc.com/으로 이동시킨다. 만약 http://www.abc.com/으로 접속했을 때 http://www.codingfactory.net/로 이동시키고 싶다면 다음과 같이 한다. if ( window.location == 'http://www.abc.com/' ) { window.location.href='http://www.codingfactory.net/'; } PHP / 다른 페이지로 리디렉션(Redirection)하는 방법

CKEditor 5 / 설정하고 사용하는 방법

CKEditor 5 / 설정하고 사용하는 방법

CKEditor는 JavaScript 기반의 WYSIWYG 에디터이다. 어떻게 설정하고 사용하는지 간략하게 알아본다. Modern JavaScript rich text editor with a modular architecture. Its clean UI and features provide the perfect WYSIWYG UX for creating semantic content. CKEditor에는 Classic editor, Inline editor, Balloon editor, Balloon block editor, Document editor 다섯 가지의 타입이 있는데, 아래의 예는 모두 ...

JavaScript / Object / Array.indexOf(), Array.lastIndexOf() - 일치하는 요소의 위치(인덱스)를 반환하는 메서드

JavaScript / Object / Array.indexOf(), Array.lastIndexOf() - 일치하는 요소의 위치(인덱스)를 반환하는 메서드

.indexOf() .indexOf()는 주어진 값과 일치하는 요소의 인덱스를 반환하는 메서드입니다. 문법 array.indexOf( value, start ) value : 찾으려는 값을 넣습니다. start : 검색을 시작할 인덱스 값입니다. 생략 가능하고, 생략했을 경우 값은 0입니다. 일치하는 원소가 있다면 인덱스를 반환합니다. 여러 개 있으면 처음 원소의 인덱스를 반환합니다. 없다면 -1을 반환합니다. 예제 배열 원소의 인덱스는 0부터 시작합니다. 즉, 첫번째 원소의 인덱스는 0, 두번째 ...

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. 문법 element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. 예를 들어 document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. 예제 id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. <!doctype html> <html lang="ko"> ...

JavaScript / 다음(카카오) 우편번호 검색 서비스 사용하는 방법

JavaScript / 다음(카카오) 우편번호 검색 서비스 사용하는 방법

다음(카카오)에서 우편번호 검색 서비스를 무료로 제공한다. 팝업 창에 Powerd by kakao가 표시되고, 기본 모양이 투박하다는 단점이 있지만, 빠르게 주소 검색 서비스를 구현해주는 고마운 서비스임에는 틀림이 없다. 자세한 사용법은 아래 링크에 있다. https://postcode.map.daum.net/guide 너무 상세한 설명이라 이해가 어렵다면, 최소한의 코드로 만들고, 필요한 것을 하나씩 추가하는 게 좋다. 기본 예제와 작동 방식 아래는 최소한의 코드로 작성한 것이다. ...