JQuery는 append를 많이 사용한다. 우선 prac.html에 작성했던 모든 코드를 지워주고 아래 코드를 복사,붙여넣기 해준다.
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
</head>
<script> function checkResult() { } </script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr /> <br>
<h2>1. 함수</h2>
<div class="button-part"> <button onclick="checkResult()">결과 확인하기!</button> </div>
<div class="list-part">
<h2>2. 붙이기</h2>
<div id="q1">
<p>사과</p>
<p>귤</p>
<p>감</p>
</div>
</div>
<div class="list-part">
<h2>3. 붙이기</h2>
<div id="q2">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
</body>
</html>
그리고 실행해주면 아래 사진처럼 나온다.
우린 저 사과, 귤, 감 밑에 다른 과일들도 붙여주고 싶다. 아래 코드를 script 안에 써주면 버튼을 눌렀을 때 그 밑에 나오는 사진처럼 나온다.
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
좀 더 깔끔하게 원래 있던 것들을 없애고 보고싶으면 empty를 써주면 되는데 쓰는 방법은 아래와 같다.
$('#q1').empty()
그리고 저장 후 버튼을 누르게 되면 원래 있던 사과, 귤, 감이 사라지고 우리가 넣은 리스트들만 나오게 된다.
이번엔 밑에있는 사람들을 더 붙여보려한다.
코드스니펫에서 people을 복사해서 fruits 밑에 붙여넣어준다.
let people = [
{'name':'서영','age':24},
{'name':'현아','age':30},
{'name':'영환','age':12},
{'name':'서연','age':15},
{'name':'지용','age':18},
{'name':'예지','age':36}
]
그리고 fruits.foreach를 복사해서 밑에 붙여 넣어준뒤 좀 고쳐주면 아래 코드와 같다.
people.forEach((a) => {
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살입니다.</p>`
$('#q2').append(temp_html)
})
그럼 버튼을 누르게 되 해당 people의 이름과 나이가 붙은채로 밑에 붙어서 나온다.
이번에도 버튼을 눌렀을 시 위사진처럼 원래있던 이름들이 그대로 있는게 아니라 없애려면 아까 작성했던 아래코드를
$('#q1').empty()
수정해준다.
$('#q2').empty()
그럼 깔끔하게 버튼 클릭시 원래 있던 것들은 사라지고 내가 넣은 리스트들만 나오게 된다.
'js 공부(ft. sparta) > 2주차' 카테고리의 다른 글
| 2-5. Fetch 시작하기(1) (0) | 2023.04.05 |
|---|---|
| 2-4. 서버-클라이언트 통신 이해하기 (0) | 2023.04.05 |
| 2-2. JavaScript, JQuery 연습하기(2) (0) | 2023.04.04 |
| 2-1. JavaScript, JQuery 연습하기(1) (0) | 2023.04.04 |
| 2w_오늘 배울 것, JavaScript 맛보기 (0) | 2023.04.03 |
