PinkCoding

CLASS web

jQuery

내용 변경 하기

내용 변경하기

오늘 배울 내용은 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>pinkcoding :: 제이쿼리 강좌</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>pinkcoding :: 제이쿼리 강좌</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>pinkcoding :: 제이쿼리 강좌</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>

결과는 바로 아래에서 확인할 수 있습니다.