[Jquery] 요소 사이, 앞, 뒤 에 넣기 append(), appendTo(), prepend(), prependTo(), after(), before(), insertAfter(), insertBefore()

jquery 요소 사이, 앞, 뒤 에 넣기 append(), appendTo(), prepend(), prependTo(), after(), before(), insertAfter(), insertBefore()

• append() - 선택한 요소의 끝에 새로운 내용을 추가합니다.

// 예시: <ul id="myList"><li>아이템 1</li></ul>
$("#myList").append("<li>아이템 2</li>");

// 결과: <ul id="myList"><li>아이템 1</li><li>아이템 2</li></ul>

 

• prepend() - 선택한 요소의 시작 부분에 새로운 내용을 추가합니다.

// 예시: <ul id="myList"><li>아이템 1</li></ul>
$("#myList").prepend("<li>아이템 0</li>");

// 결과: <ul id="myList"><li>아이템 0</li><li>아이템 1</li></ul>

 

• appendTo() - 선택한 요소를 특정한 대상 요소의 끝에 추가합니다.

// 예시: <ul id="myList"><li>아이템 1</li></ul>
$("<li>아이템 2</li>").appendTo("#myList");

// 결과: <ul id="myList"><li>아이템 1</li><li>아이템 2</li></ul>

 

*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

반응형

• prependTo() - 선택한 요소를 특정한 대상 요소의 시작 부분에 추가합니다.

// 예시: <ul id="myList"><li>아이템 1</li></ul>
$("<li>아이템 0</li>").prependTo("#myList");

// 결과 : <ul id="myList"><li>아이템 0</li><li>아이템 1</li></ul>

 

• after() - 선택한 요소 바로 뒤에 새로운 내용을 추가합니다.

// 예시: <p>Hello</p>
$("p").after("<p>World</p>");

// 결과: <p>Hello</p><p>World</p>

 

• before() - 선택한 요소 바로 앞에 새로운 내용을 추가합니다.

// 예시: <p>World</p>
$("p").before("<p>Hello</p>");

// 결과: <p>Hello</p><p>World</p>

 

• insertAfter() - 선택한 요소를 특정한 대상 요소 뒤에 추가합니다.

// 예시: <p>Hello</p>
$("<p>World</p>").insertAfter("p");

// 결과: <p>Hello</p><p>World</p>

 

• insertBefore() - 선택한 요소를 특정한 대상 요소 앞에 추가합니다.

// 예시: <p>World</p>
$("<p>Hello</p>").insertBefore("p");

// 결과: <p>Hello</p><p>World</p>