icon_home

08_제이쿼리_문서객체조작_(2)내용변경 메서드

• 문서객체조작이란? DOM(문서객체모델), HTML문서안에서 모든 요소들과 내용들을 제이쿼리를 사용하여 글자를 변경하거나 추가, 삭제 속성값을 변경할 수 있는 것을 말한다.

• https://oscarotero.com/jquery 페이지의 API에서 'attributes', 'manipulation'카테고리에서 메소드 확인가능


1. 문서내용을 변경하기 위한 메서드

• $('대상').text(); - 텍스트 내용 변경

• $('대상').html(); - 텍스트 내용 변경(태그적용 가능)

• $('대상').attr(); - 속성변경

• $('대상').val(); - 폼태그 value 값 변경

• $('대상').empty(); - 내용지우기

• $('대상').remove(); - 요소지우기

• $('대상').addclass(); - 클래스 추가하기

• $('대상').removeClass(); - 클래스 제거하기

• $('대상').hasClass(); - 클래스 존재여부확인

• $('대상').toggleClass(); - 클래스 적용/미적용

• $('대상').appendTo(); - 부모내용 마지막 위치로 이동하기

• $('대상').prependTo(); - 부모내용 처음 위치로 이동하기

2. 자바스크립트/제이쿼리로 내용 삽입하여 출력하기

• html 태그를 포함한 내용을 추가 document.getElementById('p01').innerHTML="";

• 텍스트 내용만 추가 document.getElementById('p01').innerText="";


자바스크립트로 내용 삽입

자바스크립트를 활용하여 이곳에 내용이 변경됩니다.

제이쿼리로 내용 삽입

제이쿼리로 내용을 변경합니다

제이쿼리로 html 내용을 추가합니다

      //1. 자바스크립트로 내용 삽입
      document.getElementById('p01').innerHTML="p 텍스트 내용 추가 /p" // html 태그 포함한 내용 추가
      document.getElementById('p01').innerText="텍스트 내용 추가";

      //2. 제이쿼리로 내용 삽입
      $(document).ready(function(){
        $('#p02').text('쿠팡 데이터 입력');
        $('#p03').html('a href="http://www.naver.com" title="네이버 바로가기">네이버 /a');
      });

3. attr()메서드로 이미지 갤러리 구현하기

두바이