[42일] jQuery (3) - text()와 html()

ewok 2022. 9. 26. 12:21

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>03_text_html.html</title>
        <!-- jQuery import -->
        <script src="jquery-3.6.1.min.js"></script>
    </head>  
    <body>

        <h3>text()와 html() 함수</h3>
        <button>입력!!</button>
        <hr>
        <div id="text"></div>
        <div id="html"></div>

        <script>
            //본문에 있는 <button>요소 접근
            $("button").click(function(){
                // alert();
                let txt = "<img src='../images/devil.png'>";

                //JavaScript
                document.getElementById("text").innerText = txt;
                document.getElementById("html").innerHTML = txt;

                //jQuery
                $("#text").text(txt); //단순 문자열
                $("#html").html(txt); //문자열이 마크업되면서(요소생성)

            });//click end
        
        </script>
        
    </body>
</html>

03_text_html.html

text()와 html() 함수

innerText로 txt 변수를 받았더니 문자열로 출력이 되고, innerHTML로 txt 변수를 받았더니 txt 변수의 <img> 태그에 있는 이미지 파일이 출력되었다.

jQuery 방식에서도 txt변수를 text()로 받으면 문자열, html()로 받으면 마크업 되어 요소가 생성된다.