
요소 추가
jQuery를 사용하면 새로운 요소/콘텐츠를 쉽게 추가할 수 있다.
새 HTML 콘텐츠 추가
새로운 콘텐츠를 추가하는 데 사용되는 네 가지 jQuery 메서드를 살펴보.
- append()- 선택한 요소의 끝에 내용을 삽입한다.
- prepend()- 선택한 요소의 시작 부분에 내용을 삽입한다.
- after()- 선택한 요소 뒤에 내용을 삽입한다.
- before()- 선택한 요소 앞에 내용을 삽입한다.
jQuery append()
jQuery append()메서드는 선택한 HTML 요소의 끝에 콘텐츠를 삽입한다.
예제
$("p").append("Some appended text.");
기본 예시
예제 보기jQuery prepend()
jQuery prepend()메서드는 선택한 HTML 요소의 시작 부분에 콘텐츠를 삽입한다.
예제
$("p").prepend("Some prepended text.");
기본 예시
예제 보기append() 및 prepend()를 사용하여 여러 가지 새 요소 추가
append() 및 prepend() 메소드 모두 무한한 수의 새 요소를 매개변수로 사용할 수 있다.
새 요소는 TEXT/HTML, jQuery 또는 JavaScript 코드 및 DOM 요소를 사용하여 생성할 수 있다.
예제
function appendText() { var txt1 = "Text.
"; // Create element with HTML var txt2 = $("").text("Text."); // Create with jQuery var txt3 = document.createElement("p"); // Create with DOM txt3.innerHTML = "Text."; $("body").append(txt1, txt2, txt3); // Append the new elements }
기본 예시
예제 보기jQuery after() 및 before()
jQuery after()메서드는 선택한 HTML 요소 뒤에 콘텐츠를 삽입한다.
jQuery before()메서드는 선택한 HTML 요소 앞에 콘텐츠를 삽입한다.
예제
$("img").after("Some text after"); $("img").before("Some text before");
기본 예시
예제 보기after() 및 before()를 사용하여 여러 가지 새 요소 추가
after()및 before()메소드 모두 무한한 수의 새 요소를 매개변수로 사용할 수 있다.
새 요소는 TEXT/HTML, jQuery 또는 JavaScript 코드 및 DOM 요소를 사용하여 생성할 수 있다.
예제
function afterText() { var txt1 = "I "; // Create element with HTML var txt2 = $("").text("love "); // Create with jQuery var txt3 = document.createElement("b"); // Create with DOM txt3.innerHTML = "jQuery!"; $("img").after(txt1, txt2, txt3); // Insert new elements after <img> }
기본 예시
예제 보기참고
W3C School - jQuery HTML - Add Elements
jQuery 시작하기