Programing/jQuery

제이쿼리 jquery 선택된 요소의 텍스트 변경 span, p 등의 text 변경 html() method

리커니 2015. 8. 7.
반응형

 

제이쿼리 jquery 선택된 요소의 텍스트 변경 span, p 등의 text 변경 html() method

 

선택된 요소의 택스트를 변경하는데는 html()method가 사용된다.

 

텍스트 변경 뿐만 아니라 원하는 요소(체크박스, 라이오버튼 등)를 추가할 수도 있다.

 

자바스크립트의 innerHTML과 비슷한 역할을 한다고 보면 된다.

 

- 사용방법

$("변경을 원하는 요소").html(변경될 값);

 

예)

 

<body>

<button>text change</button>

<p>
    <span id="html_test">I want to change here</span>
</p>

</body>

 

위의 예에서 text change 버튼을 클릭했을 때 id가 html_test인 span의 텍스트 값을 수정한다고 하자.

"I want to change here" 텍스트를 "change"로 변경하는 방법은 아래와 같다.

 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#html_test").html("change");
    });
});
</script>

 

버튼을 클릭하면 span의 텍스트인 "I want to change here" 이 "change"로 변경되는 것을 볼 수 있다.

 

위와 같이 텍스트를 수정할 수 있을 뿐 아니라

해당 요소를 변경 할 수도 있다.

 

위와 같은 예에서 html()메소드를 사용하는 부분을 아래와 같이 수정하면

요소를 텍스트 박스로 변경.

 

$("#html_test_span").html("<input type='text'/>");

 

체크박스, 라디오버튼으로 변경

$("#html_test_span").html("<input type='checkbox'/><input type='radio'/>");

 

반응형

댓글

💲 추천 글