<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "div1">여기는 div1 공간이야</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// 간단한 조작 메소드들
// 1. prepend(앞)
// ---> 해당하는 태그의 콘텐츠를 기점으로 앞쪽에 붙는 함수
$('#div1').prepend('<div>나는 div2!</div>')
// 2. append(뒤)
// ---> 해당하는 태그의 콘텐츠를 기점으로 뒤쪽에 붙는 함수
$('#div1').append('<div>나는 div3!</div>')
// 3. before(앞)
// ---> 해당하는 태그의 바깥쪽 앞쪽에 붙는 함수
$('#div1').before('<div>나는 div4!</div>')
// 4. after(뒤)
// ---> 해당하는 태그의 바깥쪽 뒤쪽에 붙는 함수
$('#div1').after('<div>나는 div5!</div>')
// 5. empty(비워버리기)
$('#div1').empty();
</script>
</body>
</html>
empty가 없을 경우
empty가 있을 경우
'JavaScript' 카테고리의 다른 글
| [JavaScript] Ajax (0) | 2022.05.31 |
|---|---|
| [JavaScript] 이벤트(이미지 움직이기) (0) | 2022.05.31 |
| [JavaScript] jQuery (키보드 이벤트 처리) (0) | 2022.05.31 |
| [JavaScript] jQuery (버튼 클릭 시 크기, 색상 변경) (0) | 2022.05.31 |
| [JavaScript] jQuery (요소 가져오기) (0) | 2022.05.31 |