문서 객체 메소드 정의 및 사용방법 정리 - 2

addClass()         //문서 객체의 클래스 속성을 추가
removeClass()      //문서 객체의 클래스 속성 제거
attr()             //속성과 관련된 모든 기능을 수행
removeAttr()       //문서 객체의 속성을 제거
css()              //스타일과 관련된 모든 기능을 수행
html()             //문서 객체 내부의 글자와 관련된 모든 기능을 수행(HTML 태그 인식)
text()             //문서 객체 내부의 글자와 관련된 모든 기능을 수행
remove()           //문서 객체 제거
empty()            //문서 객체 내부를 비움
$()                //문서 객체를 생성
clone()            //문서 객체를 복사

두번째 정리 입니다.

html() 와 text()

html() , text()의 차이는 무엇일까요??

html()는 html태그를 인식하고 text()는 인식을 하지 못하는 점입니다.

차이점을 예시로 확인해보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <h1>example-1</h1>
  <h1>example-2</h1>
  <h1>example-3</h1>
</body>
 
<script>
  $(function(){
  var html =  $('h1').html();
  var text =  $('h1').text();
 
  console.log(html);   //결과 example-1
  console.log(text);   //결과 example-1example-2example-3
  });
</script>
Colored by Color Scripter
cs

결과가 보이시나요??

html메소드를 이용한 것은 제일 처음 것만 출력이 되는 반면에 text 메소드 값은 모든 h1태그 안에 있는 텍스트를 출력합니다.

주의 하셔야해요!@#$%!@#

또한, html()는 html태그를 넣어서 사용할 수 있습니다.

text()에 html태그를 넣어서 사용하게 되면 html태그까지 text로 출력이 됩니다.

예시로 확인해보세요!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <div></div>
</body>
 
<script>
  $(function(){
  $('div').html('<h1>example-4</h1>');
  $('div').text('<h1>example-4</h1>');
  });
</script>
 
//변경 후
<body>
  <div>
   <h1>example-4</h1>              // html()로 입력
   $lt;h1&gt;example-4$lt;/h1&gt;  //text()로 입력
  </div>
</body>
Colored by Color Scripter
cs

remove()와 empty()

두 메소드의 기능은 같지만 사용방법은 조금 다릅니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
  <div>
    <h1>example-1</h1>
    <h1>example-2</h1>
  </div>
</body>
 
<script>
  $(function(){
    $('h1').first().remove();   //결과 : example-2 만 출력
 
    $('div').empty();           //결과 div태그 안에 있던 h1태그가 제거
  });
</script>
Colored by Color Scripter
cs

$()

문서 객체 생성할 때에는 $() 안에 매개변수에 html태그를 문자열로 넣어주면 됩니다.

동적으로 html태그를 생성할 수 있습니다.

예를 보시죠!!

1
2
3
4
5
6
7
$(function(){
  $('<h1></h1>').html('$()매개변수를 동적으로 넣어봤어요 -- 1').appendTo('body');
  $('<div>$()매개변수를 동적으로 넣어봤어요 -- 2<div>').appendTo('body');
 
  console.log($('h1').text());
  console.log($('div').text());
});
Colored by Color Scripter
cs

$()를 태그에 넣을때에는 appendTo 메소드를 사용하면 됩니다.

결과

1
2
$()매개변수를 동적으로 넣어봤어요 -- 1
$()매개변수를 동적으로 넣어봤어요 -- 2
cs

저작자표시 비영리 변경금지

'개발 관련(오류 및 정리) > JSP, JavaScript, JQuery - 개념정리' 카테고리의 다른 글

[CSS] 텍스트(값이)가 테이블옆으로 튀어나올때 해결 (1)	2019.05.23
[Javascript] submit 후 팝업창 닫기 (0)	2019.05.23
[jQuery] 문서 객체 메소드 정의 및 사용방법 정리 - 1(확인 필수) (0)	2019.05.14
[jQuery] jQuery 식별자 충돌 방지 ( jQuery, Prototype $) - 모던웹을 위한 javascript (4)	2019.05.14
[jQuery & JAVA] jQuery.getJSON() 중복체크 기능 만들기 (0)	2019.04.26