[jQuery] 8. 영역 관련 메소드(innerHTML속성과 관련된 메소드)

1. Content 영역 관련 메소드들

1) html("문구") 메소드 : innerHTML 속성과 관련된 메소드

▶ 선택된 요소의 content영역을 리턴해주거나 또는 변경해주는 메소드
- $("선택자").html() : 선택된 요소의 content영역의 값을 "반환"해줌
- $("선택자").html("문구") : 선택된 요소의 content 영역 값을 해당 문구로 변경해줌

 

 

    <h1 id="test1">
        <a href="">네이버로</a>
    </h1>

    <h1 id="test2">

    </h1>

    <script>
        $(function(){
            const tmp = $("#test1").html();  // html 태그까지 포함하여 가져온다.
            $("#test2").html(tmp);
            $("#test2").children().attr("href","http://naver.com");   // 네이버로 이동하는 하이퍼링크 추가
        })
    </script>

 

☞ .html();

id 가 test1인 태그를 가져오는데 html 태그까지 다 포함하여 가져온다.

 

 

☞ $("#test2").children().attr("href","http://naver.com");

- 네이버로 이동하는 하이퍼링크를 삽입하고 싶다면 "attr" 함수 이용하면 된다.

 

=> 하이퍼링크가 추가된 것을 볼 수 있다.

 

---

 

▶ 각 다른 내용으로 화면을 출력하고 싶을 때?

 

☞ 선택된 요소들에 순차적으로 접근할때마다 실행하는 콜백함수를 매개변수로 전달하면 된다.

 

    - index : 순차적으로 접근하는 요소의 인덱스 값
    - html : 순차적으로 접근하는 요소의 content영역값

    <div class="class1">test1</div>
    <div class="class1">test1</div>
    <div class="class1">test1</div>

    <script>
        $(function(){
            $(".class1").html(function(index,html){
                return `<h1> 인덱스 : ${index}, conent 내용: ${html}</h1>`;
            })
        })
    </script>

 

 

 

---

2) text('문구') 메소드 : innerText 속성과 관련된 메소드

▶ 선택된 요소의 content영역의 텍스트만 리턴해주거나 변경해주는 메소드
     - $("선택자").text() : 선택된 요소의 content영역의 값 중 텍스트만 리턴해줌
     - $("선택자").text("문구") : 선택된 요소의 content내용을 전달한 문구로 변경해줌

 

    <h1 id="test3">
        <a href="">구글로</a>
    </h1>

    <h1 id="test4">

    </h1>

    <div class="class2">test2</div>
    <div class="class2">test2</div>
    <div class="class2">test2</div>

    <script>
        $(function(){
            const tmp = $("#test3").text();

            $("#test4").text("<a>"+tmp+"</a>");

            $(".class2").text(function(index, text){
                return `<h1>인덱스 : ${index}, content : ${text}</h1>`;
            })
        })
    </script>