jQuery append로 HTML 코드 생성하기, ${}를 통해 HTML에 변수가 갖고 있는 값 넣기

·2021년 7월 1일
0
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)
  1. append (jQuery)
    위와 같은 코드를 통해 cards-box라는 id를 갖고 있는 HTML태그 내에 temp_html이라는 변수(javascript 변수) 내에 있는 내용을 생성할 수 있다.
    (가령 이용자가 "추가" 버튼을 눌렀을 때 해당 페이지에 뭔가 HTML로 이루어진 카드같은 것이 그 클릭이라는 동작의 결과로 추가된다든가)

  2. 백틱 ( ` )
    변수에 여러 줄의 HTML코드를 넣을 때는 보통 문자열을 넣을 때 쓰는 작은따옴표(')나 큰따옴표(")가 아닌 키보드상 숫자 1의 왼쪽에 위치한 백틱 (`)을 써야한다고 한다.

  3. ${variableName(변수이름)}
    이렇게 하면 해당 변수에 있는 값이 입력된다.(위 코드에서 ${title}이 부분이 title의 값인 "원하는 제목"으로 바뀌어서 입력된다.)

profile
백엔드 개발자. 공동의 목표를 함께 이해한 상태에서 솔직하게 소통하며 일하는 게 가장 즐겁고 효율적이라고 믿는 사람.

0개의 댓글

관련 채용 정보