검토하기: jQuery를 이용한 DOM 변경

jQuery 함수를 사용하여 요소의 컬렉션을 구했다면, 해당 컬렉션을 여러 메소드를 이용해서 변경할 수 있습니다.

내부 텍스트를 text()를 이용해서 설정해 보세요:
$("h1").text("All about cats"); (예제 보기)

Html 내부를 html()을 이용해서 설정해 보세요:
$("h1").html("I <strong>love</strong> cats"); (예제 보기)

attr()을 이용해서 속성을 설정해 보세요:
$(".dog-pic").attr("src", "dog.jpg");
$(".google-link").attr("href", "http://www.google.com"); (예제 보기)

css()를 사용해서 CSS 스타일을 변경해 보세요:
$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", "color": "red"}); (예제 보기)

addClass()를 이용해 클래스 이름을 추가해 보세요:
$("h1").addClass("warning");

또한 jQuery 함수 내부로 HTML 문자열을 전달하는 것을 통해서 새로운 요소를 만들 수도 있습니다.
var $p = $("<p>");

만약 원한다면, 태그 내용, 속성, 그리고 스타일을 포함한 전체 HTML을 전달할 수 있습니다.
var $p = $('<p style="color:red;">I love people who love cats.</p>');

요소를 만들었다면, 위의 메소드 중 어떤 것을 사용해도 변경이 가능합니다.
$p.addClass("warning");

그러면 append()를 이용해서 존재하는 요소에 추가할 수 있습니다:
$("#main-div").append($p); (예제 보기)

또한 페이지에 삽입하기 위해서 prepend()를 사용하거나 (예제 보기), appendTo()를 사용할 수 있습니다 (예제 보기) .

이러한 메소드 각각의 세부내용을 보고 싶다면, 메소드 이름 위에 있는 링크를 따라가 jQuery 문서를 읽어 보세요. 여기서 모든 내용을 다룰 수가 없고, 웹 개발을 하는 최고의 방법은 빠르게 바뀌기 때문에, 최신, 최적의 내용을 찾으려면 문서를 읽어야 합니다. 지금 바로 해 보세요!