Coding Planet
[jQuery] html(), text(), val() 메소드 본문
반응형
1. html()메서드
- html()은 요소에 작성된 내용을 얻어온다. 이때 태그가 포함된 형태로 가져온다
- JavaScript의 innerHTML과 동일한 기능을 한다.
- html("내용"): 요소의 내용을 출력한다. 이 때 태그를 인식한다.
2. text()메서드
- text()은 요소에 작성된 내용을 얻어온다. 이때 태그가 포함되지 않은 형태로 가져온다
- JavaScript의 innerText과 동일한 기능을 한다.
- text("내용"): 요소의 내용을 출력한다. 이 때 태그를 인식하지 않는다.
3. val()메서드
- value 속성 값을 얻어온다.
- JavaScript의 value와 동일한 기능을 ㅎ나다.
- val("내용") : value의 속성 값을 지정한다.
4. html()을 이용한 예제
- 버튼을 클릭하면 빨간색 입력값이 사라지고 지정된 입력값으로 대체
<body>
<div id="area">
<p class="cls1">기존에 작성되어 있는 요소</p>
</div>
<button type="button" id="btn1">html()메서드</button>
<script>
$("#btn1").on("click", function () {
//id가 area인 요소의 내용 모두 삭제
$("#area").html("");
//id가 area인 요소의 내용을 태그 포함 출력
$("#area").html(
"<p class='cls1'> html() 메서드로 작성되어 있는 요소</p>"
);
});
</script>
- 클릭시 script에 입력한 내용으로 span태그가 대체된다.
- 이 때 태그가 인식되어 class의 스타일값이 적용된다.
5. text()을 이용한 예제
- 동일한 예제를 text()로 변경할 경우 태그가 인식되지 않고 text로 그대로 출력된다.
반응형
Comments