유블로그

[jQuery] .text() .html() 로 내용 받아오기, 변경하기, 추가하기 본문

JavaScript & jQuery

[jQuery] .text() .html() 로 내용 받아오기, 변경하기, 추가하기

yujeong kang 2020. 9. 13. 11:37

< 내용 조회 >

<body>
    <div class="d">
        <h1 class="h1">안녕</h1>
    </div>
    <script>
        let text = document.getElementsByClassName("d")[0].innerHTML;
        console.log(text);
        let text2 = document.getElementsByClassName("d")[0].innerText;
        console.log(text2);

        console.log($(".d").text());
        console.log($(".d").html());
    </script>
</body>

실행결과는 

 

자바스크립트와 제이쿼리를 함께 넣어보았다.

자바스크립트의 .innerHTML 과 제이쿼리의 .html()은 태그까지 읽는 같은 역할을 한다.

자바스크립트의 .innerText 와 제이쿼리의 .text()는 태그를 제외한 안의 내용만 읽는 같은 역할을 한다.

 

 

< 내용 변경 + 추가 >

<body>
    <div class="d">
        <h1 class="h1">안녕</h1>
        <h1 class="h2">안녕2</h1>
    </div>
    <script>
        $(".h1").text("바뀐 내용");  // 이 line이 실행되면 안녕이 바뀐 내용으로 바뀜
        $(".h2").html("<h3>바뀜</h3>"); // 이 line이 실행되면 <h1 class="h2">안녕2</h1> 이 <h3>바뀜</h3>으로 바뀜
        
        $(".d").append("<h1>추가html</h1>");
        $(".d").append("추가text");
    </script>
</body>

.text()와 .html() 괄호 안에 값을 주면 변경이 가능하다.

.append()를 사용하면 html 이나 일반 text를 추가할 수 있다.

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

'JavaScript & jQuery' 카테고리의 다른 글

[JavaScript] Number() 과 parseInt()의 차이  (0) 2020.09.16
[jQuery] elment 삭제하기 - .remove(), .empty()  (0) 2020.09.13
[jQuery] .css() 로 속성 변경하거나 추가하기  (0) 2020.09.13
[jQuery] addClass, removeClass, toggleClass  (0) 2020.09.13
[jQuery] .attr() 으로 속성 get, set, 지우기  (0) 2020.09.13
'JavaScript & jQuery' Related Articles more