본문 바로가기
✨ Front-end/jQuery

[jQuery] innerHTML, text 바꾸기

by 환풍 2023. 9. 4.
728x90
반응형

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerTxt/innerHTML</title>
<script>
function process1(){
    var ob=document.getElementById("txt").value;
    document.getElementById("view1").innerText=ob;
}
function process2(){
    var ob=document.getElementById("txt").value;
    document.getElementById("view2").innerHTML=ob;
}
</script>
 
<body>
    <input type="text" id="txt" size="50" name="text">
    <input type="button" value="출력1" onclick="process1()">
    <input type="button" value="출력2" onclick="process2()">
    <br><br><br>
    <div id="view1"></div>
    <div id="view2"></div>
</body>
</html>
cs

기존 javaScript를 이용해서 텍스트를 박아넣는 형식을 jQuery로 바꾸어보았다.

 

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
    $('#btn1').on('click',function(){
        var str=$('#txt').val();
        $('#view1').text(str);
    });
    
    $('#btn2').click(function(){
        var str=$('#txt').val();
        $('#view2').html(str);
    });
});
</script>
</head>
<body>
    <input type="text" id="txt" size="50" name="text">
    <input type="button" value="출력1" id="btn1">
    <input type="button" value="출력2" id="btn2">
    <br><br><br>
    <div id="view1"></div>
    <div id="view2"></div>
</body>
</html>
cs

 

var str=$('#txt').val();

텍스트 입력 필드(#txt)에서 입력된 값을 가져와 변수 str에 저장한다.
$('#view1').text(str);: 변수 str의 내용을 <div> 요소(#view1)의 텍스트로 설정하여 출력한다.

출력2 버튼도 위와 같은 방식으로 작동되는 것이다.

 

 

 

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.container{
    position: absolute;
    top:10px;
    left: 100px;
    height: 300px;
    width: 600px;
    border: 1px dotted red;
    padding-left: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
    $('#result').text("왼쪽 메뉴를 선택하시오");
    
    $('#btn1').click(function(){
        $('#result').text("버튼1을 눌렀음").css({'color':'red', 'font-weight':'bold', 'font-size':'15px'});
    });
    
    $('#btn2').click(function(){
        $('#result').text("버튼2을 눌렀음").css({'color':'green', 'font-weight':'bold', 'font-size':'15px'});
    });
});
</script>
</head>
<body>
<a id="btn1" href="#">버튼1</a><br><br>
<a id="btn2" href="#">버튼2</a><br><br>
 
<div id="result" class="container"></div>
</body>
</html>
cs
.css({...})

.css() 메서드를 사용하여 요소의 스타일을 변경한다.

여기서는 텍스트의 색상('color'), 글꼴 굵기('font-weight'), 글꼴 크기('font-size')를 변경한다.

 

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

 

728x90
반응형
저작자표시 비영리 변경금지

'✨ Front-end > jQuery' 카테고리의 다른 글

[jQuery] JSON 표기법, 임시 회원으로 로그인 성공, 실패 처리해보기  (0) 2023.09.04
[jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크)  (0) 2023.09.04
[jQuery] 보이기 숨기기 기능 (show, hide, toggle, slideup, fade)  (0) 2023.09.04
[jQuery] 가장 기초적인 $( function() { .... } 에 대해  (0) 2023.09.04
[jQuery] 아코디언(accordion) UI 써서 활용하기  (1) 2023.09.04

관련글

댓글

티스토리툴바