유용한 함수와 기능들을 만들지 않아도 라이브러리에서 제공해준다
https://www.w3schools.com/jquery/jquery_hide_show.asp
jQuery Effects - Hide and Show
jQuery Effects - Hide and Show Hide, Show, Toggle, Slide, Fade, and Animate. WOW! Click to show/hide panel Because time is valuable, we deliver quick and easy learning. At W3Schools, you can study everything you need to learn, in an accessible and handy fo
www.w3schools.com
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="reply-1">첫번째 댓글 입니다.</div>
<input type="text" id="tf-reply"/>
<button onclick="start()">댓글쓰기</button>
<script>
function start() {
var a = $('#tf-reply').val();
$('#reply-1').prepend("<div id='reply-2'>" + a + "</div>");
// alert(a);
}
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="reply-1">첫번째 댓글 입니다.</div>
<input type="text" id="tf-reply"/>
<button onclick="start()">댓글쓰기</button>
<script>
function start() {
var a = $('#tf-reply').val();
$('#reply-1').before("<div id='reply-2'>" + a + "</div>");
// alert(a);
}
</script>
</body>
</html>
맨위의 댓글 찾기
id 번호 늘리기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div {
border: 1px solid black;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<div id="reply-box">
<div id="reply-1" class="re">첫번째 댓글 입니다.</div>
</div>
<input type="text" id="tf-reply" />
<button onclick="start()">댓글쓰기</button>
<script>
var num = 1; // 이 값은 원래 db에서 가져와야됨
function start() {
var a = $('#tf-reply').val();
num++;
$('#reply-box').prepend("<div id='reply-" + num + "'>" + a + "</div>");
}
</script>
</body>
</html>
'Web > JavaScript' 카테고리의 다른 글
| 자바스크립트 람다식 this (0) | 2020.06.02 |
|---|---|
| 자바스크립트 객체를 JSON으로 바꾸기 (0) | 2020.06.02 |
| AJAX 통신 개념 (0) | 2020.06.02 |
| 자바스크립트 history 객체 활용 미완성 (0) | 2020.03.13 |
| 자바스크립트 window.location으로 select 웹사이트 이동 (0) | 2020.03.13 |