JQuery 다뤄보기 (2)

1. 태그 내 html 입력하기

• <div'> ~ </div'> 내에,
  동적으로 html을 넣고 싶을 땐? (ex) 포스팅되면 -> 카드 추가
• 카드가 붙는 div에 id를 추가해주는 것이 핵심!

JavaScript

  <div class="mycards">
      <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
          <div class="col">
              <div class="card h-100">
                  <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                       class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">영화 제목이 들어갑니다</h5>
                      <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                      <p>⭐⭐⭐</p>
                      <p class="mycomment">나의 한줄 평을 씁니다</p>
                  </div>
              </div>
          </div>
      </div>
  </div>

1) 버튼을 넣어보기

	JavaScript
    
    let temp_html = `<button>나는 추가될 버튼이다!</button>`;
	$('#cards-box').append(temp_html);

2) 버튼 말고, 카드를 넣어보기

	JavaScript
    
    // 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
	// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
	// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
	let title = '영화 제목이 들어갑니다';

	let temp_html = `<div class="col">
				            <div class="card h-100">
				                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
				                     class="card-img-top" alt="...">
				                <div class="card-body">
				                    <h5 class="card-title">${title}</h5>
				                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
				                    <p>⭐⭐⭐</p>
				                    <p class="mycomment">나의 한줄 평을 씁니다</p>
				                </div>
				            </div>
				        </div>`;
	$('#cards-box').append(temp_html);