SeouliteLab

jQuery의 .html() 메서드: 요소의 HTML 내용 조작하기 본문

프로그래밍

jQuery의 .html() 메서드: 요소의 HTML 내용 조작하기

Seoulite Lab 2024. 3. 27. 10:53

jQuery의 .html() 메서드는 선택한 요소의 HTML 내용을 가져오거나 설정합니다. 이를 통해 동적으로 요소의 내용을 변경할 수 있습니다.

예제 1: HTML 내용 가져오기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .html() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // HTML 내용 가져오기 예제
  var content = $('#element1').html();
  console.log('내용:', content); // 출력 결과: 내용: 이것은 <b>강조된</b> 텍스트입니다.
});
</script>
</head>
<body>

<div id="element1">이것은 <b>강조된</b> 텍스트입니다.</div>

</body>
</html>
<!-- 출력 결과 -->
<!-- 내용: 이것은 <b>강조된</b> 텍스트입니다. -->

예제 2: HTML 내용 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .html() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // HTML 내용 설정하기 예제
  $('#element2').html('<em>강조된</em> 텍스트로 변경됨');
});
</script>
</head>
<body>

<div id="element2">이전 텍스트</div>

</body>
</html>
<!-- 출력 결과 -->
<!-- <div id="element2"><em>강조된</em> 텍스트로 변경됨</div> -->

예제 3: 다중 요소에 대한 HTML 내용 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .html() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 다중 요소에 대한 HTML 내용 설정하기 예제
  $('.item').html('변경된 텍스트');
});
</script>
</head>
<body>

<div class="item">아이템 1</div>
<div class="item">아이템 2</div>
<div class="item">아이템 3</div>

</body>
</html>
<!-- 출력 결과 -->
<!-- <div class="item">변경된 텍스트</div> -->
<!-- <div class="item">변경된 텍스트</div> -->
<!-- <div class="item">변경된 텍스트</div> -->
저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 .removeAttr() 메서드: 속성 제거하기  (0) 2024.03.27
jQuery의 .prop() 메서드: 속성 조작하기  (0) 2024.03.27
jQuery의 .hasClass() 메서드: 클래스 유무 확인하기  (0) 2024.03.27
jQuery의 .attr() 메서드: 속성 조작하기  (0) 2024.03.27
jQuery의 .addClass() 메서드: 요소에 클래스 추가하기  (0) 2024.03.27
'프로그래밍' Related Articles more