2-3 jQuery 다루기 ( $('#url') / hide / show / temp_html )

HTML 코드에서 특정값 가져오기 $('#id').val

1)

<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    <label>영화URL</label>
</div>

input박스에 id를 지정해줌 (url)

2)

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

id 값이 url인 곳의 값(val)을 가지고 온다.

$('#url').val('여기에 써져있는 값을 불러올수도 있다.')

val('~~~')의 값을 불러올 수 도 있다.

 

---

hide / show

$('#post-box').hide();

id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.

$('#post-box').show();

id 값이 post-box인 곳을 가리키고, show()로 보이게 한다.▶

---

 temp_html 

태그 내에 html 입력하기

예) <div> ~ </div> 내에, 동적으로 html을 넣고 싶을 때

1. 원하는 div에 id 추가

2. temp_html 선언해주기                                                                                               ↓html에서의 id 값

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

                                                     ↑홑따옴표(')가 아닌 backtick(`)으로 감싸야함                                                append: 이어써주는 코드

                                                        backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있음

 

▶▶ '나는 추가될 버튼이다' 버튼이 cards-box id를 가진 div뒤에 생성 된다.