jQuery 요소 추가

jQuery의 매우 중요한 부분은 DOM을 조작할 수 있다는 점입니다.

jQuery는 효율적으로 새 HTML 요소를 추가하는 방법을 제공합니다.

이 장에서 우리는 DOM에 새로운 HTML 요소를 추가하는 방법을 설명할 것입니다./내용.

jQuery 추가 새로운 HTML 내용

jQuery를 사용하면 새로운 HTML 요소를 쉽게 추가할 수 있습니다.

새로운 내용을 추가하기 위해 사용할 수 있는 jQuery 메서드가 다음과 같습니다：

• append()

• prepend()

• after()

• before()

• wrap()

다음에 각 메서드를 사용하는 방법을 보여드리겠습니다.

jQuery append() 메서드

jQuery append()이 메서드는 각 선택된 요소의 끝 부분(마지막 자식 요소로)에 지정된 내용을 삽입합니다.

다음 예제에서 모든 문단에 텍스트를 추가합니다：

$("button").click(function(){
　　$("p").append("Hello world");
});

다음 예제에서 모든 문단에 HTML을 추가합니다：

$("button").click(function(){
　　$("p").append("<b>Hello world</b>");
});

jQuery prepend() 메서드

jQuery prepend()이 메서드는 각 선택된 요소의 시작 부분(첫 번째 자식 요소로)에 지정된 내용을 삽입합니다.

다음 예제에서 모든 문단 앞에 텍스트를 추가합니다：

$("button").click(function(){
　　$("p").prepend("Hello world");
});

다음 예제에서 모든 문단 앞에 HTML을 추가합니다：

$("button").click(function(){
　　$("p").prepend("<b>Hello world</b>");
});

append()와 prepend()를 사용하여 여러 요소를 추가

위 예제에서 우리는 선택된 HTML 요소의 시작 부분에만/끝에 텍스트가 삽입되었습니다/ HTML.

하지만,append()그리고prepend()이 메서드는 무한히 많은 새로운 요소를 매개변수로 사용할 수 있습니다.

새로운 요소를 생성할 수 있습니다. HTML 요소(위 예제와 같이), DOM 요소 또는 jQuery 객체를 사용할 수 있습니다.

다음 예제에서 우리는 HTML 요소, DOM 요소와 jQuery 객체를 사용하여 여러 새로운 요소를 생성합니다：

function appendText() {
　　let x = "<p>예제 텍스트.<"/p>";　　//　HTML을 사용하여 요소 생성　　
　　let　y　=　$("<p></p>").text("예제 텍스트.");　　//　jQuery를 사용하여 생성
　　let　z　=　document.createElement("p");//　DOM을 사용하여 생성
　　z.innerHTML　=　"예제 텍스트.";
　　$("body").append(x, y, z);　　//새로운 요소 추가　
}

jQuery after() 메서드

jQuery after()이 메서드는 선택된 요소 뒤에 지정된 내용을 삽입합니다.

다음 예제에서 각 문단 뒤에 내용을 삽입합니다：

$("button").click(function(){
　　$("p").after("<p>Hello world</p>");
});

jQuery before() 메서드

jQuery before()이 메서드는 선택된 요소 앞에 지정된 내용을 삽입합니다.

다음 예제에서 각 문단 앞에 내용을 삽입합니다：

$("button").click(function(){
　　$("p").before("<p>Hello world</p>");
});

after()와 before()를 사용하여 여러 요소를 추가

또한,after()그리고before()이 메서드는 무한히 많은 새로운 요소를 매개변수로 사용할 수 있습니다.

새로운 요소를 생성할 수 있습니다. HTML 요소(위 예제와 같이), DOM 요소 또는 jQuery 객체를 사용할 수 있습니다.

다음 예제에서 우리는 HTML 요소, DOM 요소와 jQuery 객체를 사용하여 여러 새로운 요소를 생성합니다：

function afterText() {
　　let x = "<p>예제 텍스트.<"/p>";　　//　HTML을 사용하여 요소 생성　　
　　let　y　=　$("<p></p>").text("예제 텍스트.");　　//　jQuery를 사용하여 생성
　　let　z　=　document.createElement("p");//　DOM을 사용하여 생성
　　z.innerHTML　=　"예제 텍스트.";
　$("h1").after(x,　y,　z);　　//　이 <h1>에 새로운 요소 추가
}

jQuery wrap() 메서드

jQuery wrap()메서드는 선택된 각 요소의 앞뒤에 지정된 HTML 구조를 포함합니다.

아래 예제는 각 <p> 요소의 앞뒤에 DIV 요소를 포함합니다:

$("button").click(function(){
　　$("p").wrap("<div></div>
});

jQuery HTML 참조

완전한 HTML 메서드에 대한 참조를 위해 방문해 주세요jQuery HTML / CSS 참조。