제이쿼리 jquery 선택된 요소의 텍스트 변경 span, p 등의 text 변경 html() method
선택된 요소의 택스트를 변경하는데는 html()method가 사용된다. 텍스트 변경 뿐만 아니라 원하는 요소(체크박스, 라이오버튼 등)를 추가할 수도 있다. 자바스크립트의 innerHTML과 비슷한 역할을 한다고 보면 된다. - 사용방법 $("변경을 원하는 요소").html(변경될 값); 예) <body> <button>text change</button> <p> </body> 위의 예에서 text change 버튼을 클릭했을 때 id가 html_test인 span의 텍스트 값을 수정한다고 하자. "I want to change here" 텍스트를 "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'/>");
<span id="html_test">I want to change here</span>
</p>
$(document).ready(function(){
$("button").click(function(){
$("#html_test").html("change");
});
});
</script>
'Programing > jQuery' 카테고리의 다른 글
| jquery 제이쿼리 레이어 팝업 화면 중앙에 띄우는 방법 (0) | 2016.01.20 |
|---|---|
| $(function(){ }); 부분이 실행 안될 때 Uncaught ReferenceError: $ is not defined 해결방법 (3) | 2015.12.08 |
| 제이쿼리 폼의 객체 값을 문자열로 변환 jquery serialize() method (0) | 2015.08.02 |
| 제이쿼리 속성추가, 제거, jquery attr(), removeAttr() (0) | 2015.07.27 |
| jquery 동적으로 생성된 DOM 개체에 대한 이벤트 처리 (0) | 2014.09.02 |
댓글