728x90
반응형
SMALL
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// dom에 요소 추가하기
// <====기존요소의 내부에 추가====>
//.appen() --> 선택된 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가한다
$(document).ready(function(){
$("#button1").click(function(){
$("p").append("<b style='color:red'>Hello</b>.");
}); //append는 뒤쪽에
//.prepend() --> 선택된 요소의 '첫번째'에 새로운 요소나 콘텐츠를 추가한다.
$("#button2").click(function(){
$("p").prepend("<b style='color:red'>Hello</b>.");
}); //prepend는 앞쪽에
});
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>i would like to say : </p>
<button id="button1">append()</button>
<button id="button2">prepend()</button>
</body>
</html>
📌 화면 출력
- prepend() 를 클릭하면 앞쪽에 요소가 추가되고
- append() 를 클릭하면 뒤쪽에 요소가 추가된다
728x90
반응형
LIST
'Jquery' 카테고리의 다른 글
| [JQuery] 요소 삭제하기 - remove(); empty(); (0) | 2022.01.27 |
|---|---|
| [JQuery] 요소 속성가져오기 (.attr) (0) | 2022.01.27 |
| [JQuery] JQuery 문장구조 (0) | 2022.01.27 |