목차
html() 예제 - 모든 p요소의 내용 변경 html() 정의 html() 구문 html() 예제 - 맨 처음 p요소의 내용 반환 html() 예제 - 함수로 모든 p요소의 내용 변경 html() 예제 - <input> 경우 반환/설정 html() 예제 - <select> 경우 반환/설정 html() 예제 - <textarea> 경우 반환/설정
html() 예제 - 모든 p요소의 내용 변경
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html("홈짱닷컴 <b>Homzzang.com</b>");
});
});
</script>
<button>클릭</button>
<p>홈페이지 제작관리</p>
<p>서버관리 코딩교육</p>
결과보기
html() 정의
선택 요소의 HTML 내용을 반환/설정.
「반환」 경우, 맨 처음 일치하는 요소만 반환.
「설정」 경우, 모든 일치 요소의 내용을 설정.
cf.
text() 메서드 - 선택 요소의 텍스트 내용을 반환/설정.
html() 구문
HTML 내용 반환
$(selector ).html()
HTML 내용 설정
$(selector ).html(content )
함수 사용해 HTML 내용 설정
$(selector ).html(function(index,currentcontent ))
[매개변수]
content
필수. 입력할 내용.
※ HTML 포함 가능.
function( index,currentcontent )
선택. 입력할 내용 반환하는 함수 지정.
index currentcontent
html() 예제 - 맨 처음 p요소의 내용 반환
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("p").html());
});
});
</script>
<button>클릭</button>
<p>홈짱닷컴 <b>Homzzang.com</b> </p>
<p>코딩언어 그누보드 강의</p>
결과보기
html() 예제 - 함수로 모든 p요소의 내용 변경
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html(function(n){
return "p 요소 색인번호: " + n;
});
});
});
</script>
<button>클릭</button>
<p>홈짱닷컴 Homzzang.com</p>
<p>코딩언어 그누보드 강의</p>
결과보기
html() 예제 - <input> 경우 반환/설정
주의: <input> 경우, 종료태그 없는 태그라서 val() 메서드 이용해야 함.
<script src="https://code.jquery.com/jquery-latest.js"></script>
<input type="text" id="hz" value="홈짱닷컴">
<script>
// 반환 X
var hzhtml = $('#hz').html(); // 반환X
console.log(hzhtml);
var hzval = $('#hz').val(); // 반환O
console.log(hzval);
// 설정
$('#hz').html('<b>Homzzang.com</b>'); // 설정X
$('#hz').val('<b>Homzzang.com</b>'); // 설정O
</script>
결과보기
html() 예제 - <select> 경우 반환/설정
[주의] - 값 (반환/설정)은 이루어지나, 태그는 적용 X
<script src="https://code.jquery.com/jquery-latest.js"></script>
<select id="lang">
<option value="html"><b>html<b></option>
<option value="css"><b>css</b></option>
<option value="js" selected><b>js</b></option>
</select>
<script>
// 반환
var langhtml = $('#lang option:selected').html();
console.log(langhtml);
// 설정
$('#lang option:selected').html('<b>javascript</b>');
</script>
결과보기
html() 예제 - <textarea> 경우 반환/설정
[주의] - <textarea> 안에서는 태그 적용 X. (반환 경우, 태그 기호는 실체값으로 가져옴. / 설정 경우, 입력값 그대로 출력됨.)
<script src="https://code.jquery.com/jquery-latest.js"></script>
<textarea id="hz"><b>홈짱닷컴</b></textarea>
<script>
// 반환 (★ 기호 뺀 값 형태로 가져옹)
var hzhtml = $('#hz').html();
console.log(hzhtml); // &★lt;b&★gt;홈짱닷컴&★lt;/b&★gt;
// 설정
$('#hz').html('<b>Homzzang.com</b>');
</script>
결과보기
