[jQuery] 데이터 출력

기본 Javascript에서 데이터 출력 방식을 jQuery에서도 유사한 문법으로 사용 가능하다. 간단한 예시로 jQuery문법의 데이터 출력을 쉽게 익힐 수 있다.

 

 

jQuery 출력 함수

.alert(내용)	내용을 팝업 메세지 창에서 출력 (기존 js와 동일)
console.log("내용")	개발자 도구 화면의 콘솔로 내용이 출력됨 (기존 js와 동일)
.html(내용)	기존 js의 .innerHTML이랑 유사 태그 element의 내용을 변경하여 출력하는 방식, HTML태그가 적용돼서 출력된다.
.text(내용)	기존 js의 .innerText이랑 유사 태그 element의 내용을 변경하여 출력하는 방식, HTML태그가 적용 안 되고 노출된 상태로 출력된다.

 

 

다음 코드로 간단한 예시를 준비해보자.

<script src="js/jquery-3.7.1.js"></script>

    <div>jQuery 출력 예시</div>

    <br><br>
    <button class="button1">.alert(내용)</button>
    <button class="button2">console.log(내용)</button>
    <button class="button3">.html(내용)</button>
    <button class="button4">.text(내용)</button>
    <br><br><br>

    <script>
        $(() => {
            $(".button1").click(()=>{
                window.alert("내용!");
            });
            $(".button2").click(()=>{
                console.log("내용!");
            });
            $(".button3").click(()=>{
                var div2 = $(".div2");
                div2.html("<div>내용!</div>");
            })
            $(".button4").click(()=>{
                var div2 = $(".div2");
                div2.text("<div>내용!</div>");
            })
        });
        
    </script>


    <div class="div2" style="height: 300px; width: 300px; background-color: aqua;"></div>

 

 

이를 브라우저에서 띄우면 다음 화면이 나온다.

 

 

실험 결과

각 함수 버튼을 눌러 보면, 함수가 어떻게 작동하는지 볼 수 있다.

 

.alert()

console.log()

.html()

.text()