2주차_4(jQuery다뤄보기2)

※val()은 input값을 바꾸고 text는 문자를 바꿈

버튼의 텍스트 바꾸기

<a onclick="hey()" class btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

▼id 추가

<a onclick="hey()" id="btn-posting-box" class btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

$('#btn-posting-box').text('랄라')

text가 바뀜

태그 내 html 입력하기

<div class="card-columns">

▼id 추가

<div class="card-columns" id="cards-box">

let temp_html = `<button>나는 버튼이다</botton>` 

  ※ backtick(` `) 은 1번의 옆에 있음 backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.

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

append 첨부하다

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

let temp_html = `<div class="card">
            <img class="card-img-top"
                 src="data:image/jpeg;base64,/9j/4AAQS"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/"> 여기 기사 제목이 들어가죠 </a>
                <p class="card-text">T기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>`

▼

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

 

▶ 카드 추가

제목바꾸기

console에서 

let title = '아무거나 해줘' 를 입력

▼

let temp_html = `<div class="card">
            <img class="card-img-top"
                 src="data:image/jpeg;base64,/9j/4AAQS"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/"> ${title} </a>
                <p class="card-text">T기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>`

▼

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

 

▶ 제목 수정