Javascript:요소 내용 변경: 두 판 사이의 차이

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
(새 문서: {{Javascript}} == 개요 == 선택한 요소의 내용을 변경하는 방법. <br /> == 방법 == === 클래스 관련 === {| class="wikitable" !의도 !설명 !방법 |- |클래...)
 
편집 요약 없음
1번째 줄: 1번째 줄:
{{Javascript}}
{{Javascript}}


== 개요 ==
==개요==
선택한 요소의 내용을 변경하는 방법.
선택한 요소의 내용을 변경하는 방법.<br />
<br />


== 방법 ==
==방법==


=== 클래스 관련 ===
===클래스 관련===
{| class="wikitable"
{| class="wikitable"
!의도
!의도
35번째 줄: 34번째 줄:
</syntaxhighlight>
</syntaxhighlight>
|-
|-
|클래스 객체  
|클래스 객체
|해당 객체 자체에서 클래스를 지운다.
|해당 객체 자체에서 클래스를 지운다.
|<syntaxhighlight lang="javascript">
|<syntaxhighlight lang="javascript">
객체.classList.remove();
객체.classList.remove();
</syntaxhighlight>
|}
=== 태그 내부 관련 ===
{| class="wikitable"
!의도
!설명
!방법
|-
|태그 내부의 내용 변경
|
|<syntaxhighlight lang="javascript">
객체.innerHTML = '변경할 내용';
</syntaxhighlight>
</syntaxhighlight>
|}
|}

2022년 5월 23일 (월) 14:20 판

틀:Javascript

  1. Javascript:개요
  2. Javascript:변수, 상수
    1. Javascript:자료구조
  3. Javascript:연산자
  4. 분기문
    1. Javascript:조건문
    2. Javascript:반복문
  5. Javascript:선택자
    1. Javascript:요소 내용 변경
    2. Javascript:HTML로부터 데이터 받기
  6. Javascript:이벤트
    1. Javascript:클릭 이벤트
  7. Javascript:AJAX
    1. AJAX 활용
      1. Javascript:댓글달기
      2. Javascript:무한 스크롤링
  8. Javascript:활용
    1. Javascript:표 정렬

개요

선택한 요소의 내용을 변경하는 방법.

방법

클래스 관련

의도 설명 방법
클래스명 변경 클래스 이름을 지정한다.
객체.className = '이름';
클래스 추가 기존에 추가
객체.className += ' 이름';  // 스페이스도 추가해 주어야 한다.
객체.classList.add('이름');  // 스페이스 필요없음.
클래스 내용 변경 기존 내용을 변경한다.

클래스 요소 중 해당 내용만 변경한다.

객체.classList.replace('변경전이름', '변경할이름');

객체.classList.remove('삭제할이름', ...);
클래스 객체 해당 객체 자체에서 클래스를 지운다.
객체.classList.remove();

태그 내부 관련

의도 설명 방법
태그 내부의 내용 변경
객체.innerHTML = '변경할 내용';