jQuery를 이용해 요소 변경하기
지난 글에서 .text 메소드만 사용했지만 사실 jQuery로 할 수 있는 것들은 더욱 무궁무진하다. 클래스네임을 추가하거나 CSS를 추가해줄 수도 있다. 예시로 p 태그로 감싸진 텍스트의 색상을 초록색으로 변경해보자.
$("p").css("color", "green");css 메소드는 두 가지 인자를 받는다. 첫 번째는 프로퍼티 이름, 두 번째가 프로퍼티 값이다. 이런 식으로 jQuery를 이용해 css 속성에 직접적으로 관여할 수 있다. 그러나.. 솔직히 좋은 방법은 아니다. 스타일링은 style 부분에서 한 번에 관리하는 편이 유지보수가 쉽기 때문이다. 이럴 바엔 class를 추가해주는 편이 더 낫다.
$("p").addClass("makeItGreen");이처럼 addClass 메소드를 이용해 클래스를 추가해준 다음, 위로 올라가 makeItGreen의 css 속성을 지정해주면 된다.
또 하나의 유용한 메소드가 있다. 바로 .attr이다. attr은 attribute(속성)의 줄임말로 말그대로 속성에 관여하는 메소드다. 이것도 CSS 메소드와 마찬가지로 두 가지 인자를 받는다. 변경할 속성명과, 그 값이다. 예시로 a 태그의 하이퍼링크 주소를 변경하는 코드를 보자.
$("a").attr("href", "https://en.wikipedia.org/wiki/");같은 방법으로 img src도 바꿀 수 있다.
$("img").attr("src", "https://blahblah");jQuery를 이용해 요소 추가하기
이번에는 아예 새로운 요소를 만드는 일을 해볼 것이다.
순서를 정확하게 기억하는 것이 좋다.
요소를 생성한다 -> 요소를 수정한다 -> 요소를 넣을 위치를 정한다
- 요소를 생성한다. 예시는 새로운 문단을 만드는 코드다.
var newP = $("<p>");- 요소를 수정한다. 지난 글에서 했던 것처럼 text 메소드를 이용해보자.
newP.text("The crocodiles have eaten this ENTIRE PAGE!");- 위치를 지정해준다. 2번까지 했어도 화면에는 아무 것도 보이지 않는다. 위치를 지정해주지 않았기 때문에 자바스크립트 메모리 공간 어딘가를 부유하고 있기 때문이다.
-> 다음 코드는 새로운 문단을 body의 가장 마지막 부분에 추가하는 코드다. append 뿐만 아니라 prepend나 after 등의 메소드도 사용할 수 있다.
$("body").append(newP);