jQuery 07. Content영역 관련 메소드

Content 영역( innerHTML, innerText )관련 메소드

 

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

선택된  요소의 content 영역의 값을 리턴해주거나 변경해주는 메소드

> $("선택자").html() : 선택된 요소의 content영역 값(innerHTML 속성값)을 반환해줌(html태그까지 포함)

> $("선택자").html("문구") : 선택된 요소의 content값을 해당 문구로 변경해줌 (html태그가 존재할 경우 태그로써 해석해줌)

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

    </h1>

    <script>
        $(function(){
            //const tmp = document.getElementById("test1").innerHTML;
            const tmp = $("#test1").html(); //
            console.log(tmp);// "<a href="">네이버로</a>" ==> 문자열 

            //document.getElementById("test2").innerHTML = "변경할 문자열"
            $("#test2").html(tmp);
            $("#test2").children().attr("href","http://www.naver.com");

        })
    </script>

네이버로

 

* text(["문구"] 메소드 : innerText속성과 관련된 메소드

> $("선택자").text() : 선택된 요소의 innerText속성값 반환 (html태그 포함X , 오로지 텍스트만)

> $("선택자").text("문구") : 선택된 요소의 innerText속성값 변경해줌

 

 

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

    </h1>
    <script>
        $(function(){
            const tmp = $("#test3").text();
            console.log(tmp); //"구글로"

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

구글로