[jQuery] content와 관련된 메소드 - html(), text()

content와 관련된 메소드

1. html() - innerHTML 속성과 관련된 메소드

   : 선택된 요소의 content 영역(시작태그와 종료태그의 사이 영역)을 리턴시키거나 변경해주는 메소드

  - $("선택자").html(): 선택된 요소의 content 영역의 값을 html 태그를 포함하여 반환한다.

  - $("선택자").html("문구"): 선택된 요소의 content 영역의 값을 해당 문구로 변경해서 반환한다.

                                      문구에 html 태그가 있을 경우엔 태그로 해석한다.

 

<h1 id="url1"><a>다음으로 가기</a></h1>
<h1 id="url2"><a>네이버로 가기</a></h1>
<script>
    $(function(){
        let h1 = $("#url1").html();
        $("#url2").html(h1);
        $("#url1").children().attr("href", "https://www.daum.net");
        $("#url2").children().attr("href", "https://www.naver.com");
    });
</script>

 

 

 

2. text() - innerText 속성과 관련된 메소드

   : 선택된 요소의 content 영역의 텍스트만 리턴시키거나 변경해주는 메소드

  - $("선택자").text(): 선택된 요소의 content 영역을 html 태그 없이 텍스트만 반환한다.

  - $("선택자").text("문구"): 선택된 요소의 content 내용을 전달값으로 변경해서 반환한다.

                                     문구에 html 태그가 있을 경우에 태그로 해석하지 않는다.

 

<h1 id="text1">Google</h1>
<h1 id="text2"></h1>
<script>
    $(function(){
        let text1 = $("#text1").text();
        console.log(text1);
        let text2 = $("#text2").text();
        console.log(text2);
    });
</script>