JQuery HTML 변경 - jQuery HTML byeongyeong

Question

목차 Show

유블로그
[jQuery] .text() .html() 로 내용 받아오기, 변경하기, 추가하기
내용 변경하기

유블로그

JavaScript & jQuery

[jQuery] .text() .html() 로 내용 받아오기, 변경하기, 추가하기

yujeong kang 2020. 9. 13. 11:37

< 내용 조회 >

<body>
    <div class="d">
        <h2 class="h2">안녕</h2>
    </div>
    <script>
        let text = document.getElementsByClassName("d")[0].innerHTML;
        console.log(text);
        let text2 = document.getElementsByClassName("d")[0].innerText;
        console.log(text2);

        console.log($(".d").text());
        console.log($(".d").html());
    </script>
</body>

실행결과는

자바스크립트와 제이쿼리를 함께 넣어보았다.

자바스크립트의 .innerHTML 과 제이쿼리의 .html()은 태그까지 읽는 같은 역할을 한다.

자바스크립트의 .innerText 와 제이쿼리의 .text()는 태그를 제외한 안의 내용만 읽는 같은 역할을 한다.

< 내용 변경 + 추가 >

<body>
    <div class="d">
        <h2 class="h2">안녕</h2>
        <h2 class="h2">안녕2</h2>
    </div>
    <script>
        $(".h2").text("바뀐 내용");  // 이 line이 실행되면 안녕이 바뀐 내용으로 바뀜
        $(".h2").html("<h3>바뀜</h3>"); // 이 line이 실행되면 <h2 class="h2">안녕2</h2> 이 <h3>바뀜</h3>으로 바뀜
        
        $(".d").append("<h2>추가html</h2>");
        $(".d").append("추가text");
    </script>
</body>

.text()와 .html() 괄호 안에 값을 주면 변경이 가능하다.

.append()를 사용하면 html 이나 일반 text를 추가할 수 있다.

everdevel이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

내용 변경하기

오늘 배울 내용은 text(),html() 함수 입니다.

text()

어떤 p태그 안에 내용이 hello가 있다면 text()를 사용해서 konnichiha로 변경할 수 있습니다.

신기하죠? 그럼 한번 해볼까요?

HTML

<p class="change_greeting">hello</p>

jQuery

$('.change_greeting').text('konnichiha');

이렇게 되면 change_greeting가 감싸고 있는 텍스트는 konnichiha로 변경됩니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
    $(function(){
        $('.change_greeting').text('konnichiha');
    });
</script>
</head>
<body>
    <p class="change_greeting">hello</p>
</body>
</html>

결과는 바로 아래에서 확인하겠습니다.

이 소스 실행 버튼을 눌러서 결과를 확인해 보시기 바랍니다.
^^결과를 확인하셨나요?
hello가 아닌 konnichiha가 출력이 되죠?
모터에 전기를 공급하면 모터가 정방향으로 빠르게 회전 하죠?
LED에 전기를 공급하면 다이오드에서 빛이 발광하죠?
모터의 반대로 역방향으로 돌리면 모터는 전기를 생산합니다.
LED는의 빛이 발광하는 부분에 역으로 우리가 빛을 공급해주면 어떻게 될까요?
LED는역으로 전기를 생산합니다.
text()안에 아무것도 쓰지 않는다면 역으로 해당하는 요소의 글을 가져온답니다.
text()의 괄호 안에 어떠한 문구를 써 넣으면 해당하는 요소의 텍스트를 괄호안의 문구로 변경해주는데요.
반대로 아무것도 쓰지 않는다면 해당하는 요소가 감싸는 텍스트를 가지고 오는 기능도 있답니다.
아래는 클래스 hello감싸는 텍스트hello를 jquery의 text()가 값을 가져와서 alert창으로 띄워주는 소스 입니다.

HTML

<p class="hello">hello</p>

jQuery

var i = $('.hello').text();
alert(i);

아래의 소스 웹에서 보기 버튼을 눌러서 확인해 보시기 바랍니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript"　src="https://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
    $(function(){
        var i = $('.hello').text();
        alert(i);
    });
</script>
</head>
<body>
<p class="hello">hello</p>
</body>
</html>

결과는 바로 아래에서 확인하겠습니다.

text()에 대해서 알아봤는데요.
이번에는 html();에 대해서 알아봅시다.

html()

html()도 text()와 비슷한 기능인데요.
text()은 텍스트만 불러오지만 html()은 html태그도 불러 옵니다.

$('.class_Name').html('<p>hello</p>');

위와 같이 괄호 안에 태그를 사용할 수 있습니다.
위의text()예제를 html로 변경해서 사용할게요. hello 를 볼드가 들어간 konnichiha로 변경해주는 소스입니다.

HTML

<p class="change_greeting">hello</p>

jQuery

$('.change_greeting').html('<b>konnichiha</b>');

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript"　src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.change_greeting').html('<b>konnichiha</b>');
    });
</script>
</head>
<body>
    <p class="change_greeting">hello</p>
</body>
</html>

결과는 바로 아래에서 확인하겠습니다.

봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.

컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.

컨텐츠
더보기

jQuery html 추가 jquery html 가져오기 jquery html jQuery html text jQuery html JavaScript Jquery text 변경