SeouliteLab

jQuery를 활용한 h태그 내용 변경 예제 본문

프로그래밍

jQuery를 활용한 h태그 내용 변경 예제

Seoulite Lab 2024. 3. 26. 14:14

소개:
이번 예제에서는 jQuery를 사용하여 HTML 문서 내의 h태그의 내용을 변경하는 방법을 알아봅니다. 'h태그 다루기' 버튼을 클릭하면 해당 버튼의 텍스트가 '바꾸기!'로 변경되는 기능을 구현하여 jQuery의 기본 사용법을 익힐 수 있습니다.

h태그 내용 변경:
jQuery를 사용하여 h태그의 내용을 변경하기 위해서는 해당 h태그의 선택자를 사용하여 선택한 후, text() 메서드를 사용하여 내용을 변경합니다.

설정:
HTML 파일 내에서 jQuery 라이브러리를 로드해야 합니다. 일반적으로 CDN을 통해 라이브러리를 로드하거나 로컬에 포함시킬 수 있습니다.

예제: h태그 내용 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>h태그 내용 변경 예제</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>원래 텍스트</h1>
    <button id="changeTextBtn">h태그 변경</button>

    <script>
        $(document).ready(function(){
            $('#changeTextBtn').click(function(){
                $(this).text('바꾸기!');
            });
        });
    </script>
</body>
</html>

출력 결과:

<button id="changeTextBtn">바꾸기!</button>

설명:
위의 예제에서는 jQuery를 사용하여 'h태그 변경' 버튼을 클릭하면 버튼의 텍스트가 '원래 텍스트'에서 '바꾸기!'로 변경됩니다. $(document).ready() 함수를 사용하여 문서가 로드되면 버튼의 클릭 이벤트를 처리하도록 설정합니다. 클릭 이벤트 핸들러에서는 클릭된 버튼의 텍스트를 text() 메서드를 사용하여 변경합니다.

저작자표시 비영리 변경금지

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

jQuery를 사용한 input 태그 값 가져오기와 alert 창 표시 예제  (0) 2024.03.26
jQuery를 사용한 input 태그 placeholder 변경 예제  (0) 2024.03.26
Java에서 디렉토리 크기 계산하는 방법  (0) 2024.03.26
Java에서 ArrayBlockingQueue를 활용한 스레드간 안전한 데이터 전달 방법  (0) 2024.03.26
Java에서 AtomicLong을 활용한 원자적인 연산 처리 방법  (0) 2024.03.26
'프로그래밍' Related Articles more