러닝 자바스크립트: ES6로 제대로 입문하는 모던 자바스크립트 웹 개발

396

러닝 자바스크립트

$

paras

instanceof

$; //

true

$

paras

instanceof

jQuery

; //

true

HTML

로 제이쿼리를 호출하면 그에 맞는

DOM

요소가 새로 만들어집니다. 요소의

innerHTML

프로퍼티를 조작했을 때와 비슷한 결과가 나옵니다.

const

$

newPara

= $('<

p

>

Newly

created

paragraph

...</

p

> ');

위 두 예제에서는 제이쿼리 객체를 가리키는 변수 이름을 달러 기호로 시작했습니다. 꼭 그렇

게 해야 하는 건 아니지만, 이런 습관을 들이는 게 좋습니다. 이런 습관을 들이면 어떤 변수가

제이쿼리 객체인지 금방 알 수 있습니다.

19.5

요소 조작

이제 제이쿼리 객체를 만드는 법은 알았는데, 그걸로 뭘 할 수 있을까요? 제이쿼리를 쓰면 매

우 쉽게 콘텐츠를 추가하거나 제거할 수 있습니다. 이들 예제를 따라 해 보려면 브라우저에서

샘플

HTML

을 불러온 다음 이들 예제를 콘솔에서 실행하는 것이 가장 좋은 방법입니다.

DOM

을 수정하면 다른 예제가 실행되지 않을 수 있는데, 이럴 때는 파일을 다시 불러오면 됩니다.

제이쿼리에는

text

와

html

메서드가 있습니다. 이들은 각각 요소의

textContent

,

innerHTML

프로퍼티에 대응합니다. 예를 들어