Frontend/jQuery

[jQuery] 03_text(), html() 함수

howdyoon 2023. 3. 29. 18:42

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>03_text_html.html</title>
  <style></style>
  <!-- jQuery import -->
  <script src="jquery-3.6.4.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); //문자열이 마크업되면서(요소생성) 출력
        
    });    


  </script>

</body>
</html>