9. 왕초보 웹개발 종합반

[자바스크립트] 카드 박스 계속 붙이기(JQuery의 HTML 화)

도피디 2023. 1. 23. 23:38
반응형

아래 카드박스들을 계속 붙이는 태그를 적어보자

[...붙이기 붙이기...]

 

 

 

 

 

 

 

 

해당 카드박스 div에

id="cards-box" 붙여주기

 

 

 

콘솔창에 아래와 같이 입력

 

백틱 안의 태그는 html이 아니라 문자열이다.

이 문자열을 html화 시켜보자.

 

 

 

 

 

이어서 

$('#cards-box').append(temp_html) 입력 ---->  cards-box에다가 temp_html을 html화 하겠다는 의미

 

 

 

 

 

그래서 맨 아래처럼 버튼이 붙어버림 (html화 했으니까!)

 

 

 

 

 

 

계속 넣으면

위 처럼 버튼이 계속 붙음

 

 

 

 

 

 

 

 

 

 

아래의 카드 div 복사 후

 

저 백틱 사이에 복붙해준다

 

 

 

이렇게!!

 

 

 

 

그다음, 

$('#cards-box').append(temp_html)

입력 후 엔터

 

 

 

 

오.. 카드가 붙음..!(5번째 카드 생성됨)

 

 

여러번 입력하면 

 

카드 여러개 붙음!! 오...신기해 ㅎㅎ

 

 

반응형