let title = "원하는 제목"
let temp_html = `
<div class="card">
<a href="https://velog.io">${title}</a>
<p class="card-text">기사의 요약 내용이 들어갑니다.</p>
<p class="comment">여기에 코멘트가 들어갑니다.</p>
</div>`
$('#cards-box').append(temp_html)
append (jQuery)
위와 같은 코드를 통해 cards-box라는 id를 갖고 있는 HTML태그 내에 temp_html이라는 변수(javascript 변수) 내에 있는 내용을 생성할 수 있다.
(가령 이용자가 "추가" 버튼을 눌렀을 때 해당 페이지에 뭔가 HTML로 이루어진 카드같은 것이 그 클릭이라는 동작의 결과로 추가된다든가)
백틱 ( ` )
변수에 여러 줄의 HTML코드를 넣을 때는 보통 문자열을 넣을 때 쓰는 작은따옴표(')나 큰따옴표(")가 아닌 키보드상 숫자 1의 왼쪽에 위치한 백틱 (`)을 써야한다고 한다.
${variableName(변수이름)}
이렇게 하면 해당 변수에 있는 값이 입력된다.(위 코드에서 ${title}이 부분이 title의 값인 "원하는 제목"으로 바뀌어서 입력된다.)