jQuery 기초 -2

- input 값 가져오는 함수

html에서 id가 'post-url'인 태그의 내용을 가져옴

$('#post-url').val();

id가 'post-url'인 input 태그에 내용 입력

 

input 태그의 내용을 가져옴

 

- input 값 넣는 함수

html에서 id가 'post-url'인 태그에 내용을 넣어줌

$('#post-url').val('new text');

id가 'post-url'인 input 태그에 내용 입력

내용이 입력된 화면

- HTML 없애는 함수

태그 안에 적은 모든 것을을 없앰

$('#cards-box').empty();

없애기 전 화면

id가 'cards-box'인 태그를 없앰

없앤 후 화면

 

- HTML 추가하는 함수

id가 'cards-box' 태그에 이어 붙임

$('#cards-box').append(`<div class="card">
    <img class="card-img-top"
         src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
         alt="Card image cap">
    <div class="card-body">
        <a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
        <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
        <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
    </div>
</div>`);

id가 'cards-box' 태그에 이어붙임

empty()로 내용을 없애고 append()로 내용을 붙인 결과 화면