jQuery 입문 | 요소의 조작 | 요소의 내부 변경 .html() .text()

Tags:

기존 요소의 내부 변경

다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 반환하거나 설정할 수 있다.

메소드 설명
.html() 해당 요소의 HTML 콘텐츠를 반환하거나 설정한다.
.text() 해당 요소의 텍스트 콘텐츠를 반환하거나 설정한다.

.html() 메소드

.html() 메소드는 선택한 요소의 내용을 새로운 HTML 요소로 변경한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.html() 메소드를 이용하면, <p> 요소의 내용을 새로운 HTML 요소로 변경할 수 있다.

$("p").html("<div class='wrap'>devkuma입니다.</div>");

코드 실행

.text() 메소드

.text() 메소드는 선택한 요소의 내용을 새로운 단순 text로 변경한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.text() 메소드를 이용하면, <p> 요소의 내용을 새로운 text로 변경할 수 있다.

$("p").text("devkuma입니다.");

코드 실행

.html() 메소드와 .text() 메소드의 차이점

.html()는 선택한 요소의 내용에 html 태그 요소가 포함되어 있으면 태그를 적용하여 표시를 하지만, .text()인 경우는 html 태그를 적용하지 문장 그대로 표시를 하게 된다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

아래와 같이 html를 표함한 문장을 표시를 하게 되면 html 태그를 적용하지 문장 그대로 표시한다.

$("p").text("<div class='wrap'>devkuma입니다.</div>");

코드 실행

.html() 응용 예제

.html()와 setInterval()를 이용하여 현재 시간을 표시해 보도록 하겠다. 실행을 하면 1초(1000ms)마다 시간 표시가 변한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>현재 시간</title>
    <script>
        $(function() {
          $("#now").text(new Date());
            setInterval(function() {
                $("#now").text(new Date());
            }, 1000);
        });
    </script>
</head>
<body>
    <h1>현재 시간</h1>
    <div id="now"></div>
</body>
</html>

코드 실행




최종 수정 : 2021-08-27