jquery - DOM) HTML 과 TEXT

*HTML

<p id="test1"><b>this is paragraph</b></p>
<p id="test2"><b>this is paragraph</b></p>

<button id="btn1">set text</button>
<button id="btn2">set html</button>

• p태그 내용에 볼드를 걸어서 글씨를 두껍게 만듬
• 버튼을 2개 만든다.

 

*JQUERY

$(document).ready(function(){

    $("#btn1").click(function(){
        $("#test1").text(function(i, origText){
            return "old text: " +origText+ "new text:hello world";
        });
    });


    $("#btn2").click(function(){
        $("#test2").html(function(i, origText){
            return "old text: " +origText+ "new text:hello world";
        });
    });
    
});

• btn1에는 text를 사용 btn2에는 html을 사용했다.
• btn1은 버튼을 누르기 전에는 볼드효과가 있는 글씨고 버튼을 누르면 text만 가져와서 노말의 글씨체가 된다
• 반면 btn2의 html을 사용한것은 <b></b>태그 까지 가져와서 효과가 적용됨.

*적용 결과

더보기 클릭