jQuery 요소 추가

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

새로운 HTML 내용 추가

우리는 새로운 내용을 추가하는 데 사용되는 네 가지 jQuery 메서드를 배웁니다:

  • append() - 선택된 요소 끝에 내용 삽입
  • prepend() - 선택된 요소 시작에 내용 삽입
  • after() - 선택된 요소 뒤에 내용 삽입
  • before() - 선택된 요소 앞에 내용 삽입

jQuery append() 메서드

jQuery append() 메서드는 선택된 요소의 끝에 내용을 삽입합니다.

예제

$("p").append("추가된 텍스트.");

본인이 직접 시도해보세요

jQuery prepend() 메서드

jQuery prepend() 메서드는 선택된 요소의 시작에 내용을 삽입합니다.

예제

$("p").prepend("추가된 텍스트.");

본인이 직접 시도해보세요

append()와 prepend() 메서드를 통해 여러 개의 새로운 요소 추가

위의 예제에서, 우리는 선택된 요소의 시작/끝에 텍스트/HTML을 삽입했습니다.

append()와 prepend() 메서드는 매개변수를 통해 무한히 많은 새로운 요소를 받을 수 있습니다. 위의 예제와 같이 jQuery를 사용하여 텍스트/HTML을 생성하거나 JavaScript 코드와 DOM 요소를 통해 생성할 수 있습니다.

아래의 예제에서, 우리는 여러 개의 새로운 요소를 생성합니다. 이 요소들은 text/HTML, jQuery 또는 JavaScript/DOM을 통해 생성되며, 그런 다음 append() 메서드를 사용하여 이 요소들을 텍스트에 추가합니다(prepend()도 마찬가지입니다):

예제

function appendText()
{
var txt1="<p>텍스트.</p>";               // HTML을 사용하여 새로운 요소 생성
var txt2=$("<p></p>").text("텍스트.");   // jQuery를 사용하여 새로운 요소 생성
var txt3=document.createElement("p");  // DOM을 통해 새로운 요소 생성
txt3.innerHTML="텍스트.";
$("p").append(txt1,txt2,txt3);         // 새로운 요소 추가
{}

본인이 직접 시도해보세요

jQuery after()와 before() 메서드

jQuery after() 메서드는 선택된 요소 후에 내용을 추가합니다。

jQuery before() 메서드는 선택된 요소 전에 내용을 추가합니다。

예제

$("img").after("이후 텍스트에 있는 텍스트");
$("img").before("이전 텍스트 전에 있는 텍스트");

본인이 직접 시도해보세요

after()와 before() 메서드를 통해 여러 새로운 요소 추가

after()와 before() 메서드는 무한히 많은 새로운 요소를 파라미터로 받을 수 있습니다. text/HTML, jQuery 또는 JavaScript/DOM을 통해 새로운 요소를 생성할 수 있습니다.

아래의 예제에서, 우리는 여러 새로운 요소를 생성합니다. 이 요소들은 text/HTML, jQuery 또는 JavaScript/DOM을 통해 생성될 수 있습니다. 그런 다음, 우리는 after() 메서드를 통해 이 새로운 요소들을 텍스트에 추가합니다（before() 메서드도 마찬가지입니다）:

예제

function afterText()
{
var txt1="<b>I </b>";                    // HTML을 통해 새로운 요소 생성
var txt2=$("<i></i>").text("사랑 ");     // jQuery를 통해 새로운 요소 생성
var txt3=document.createElement("big");  // DOM을 통해 새로운 요소 생성
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // img 다음에 새로운 요소 추가
{}

본인이 직접 시도해보세요

jQuery HTML 참조 매뉴얼

jQuery HTML 메서드의 전체 내용에 대해 알고 싶다면 다음 참조 매뉴얼을 방문하세요：