jQuery:의 차이점은 무엇 후()및 insertAfter()

Question

jQuery 가 .after() 방법이고,또한 .insertAfter() 방법입니다.

의 차이는 무엇인가?나는 생각할 수 있습 사용 .after() 요소를 삽입한 후에 선택한 요소(또는 요소에).맞나요?What's .insertAfter() 니까?

Answer 1

그들은 상호 반대입니다.

'~ 후에'선택기 다음에 인수를 삽입합니다.

'삽입자'인수 후 선택기를 삽입합니다.

다음은 다음과 같은 일의 예입니다.

insertAfter () :

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( "<p>Test</p>" ).insertAfter( ".inner" );
Each inner <div> element gets this new content:
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

후에():

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( ".inner" ).after( "<p>Test</p>" );

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

Answer 2

그들은 역함수의됩니다.설명에 따라 jQuery 문서:

이:

$("p").insertAfter("#foo");

과 같다:

$("#foo").after("p");

그리고 마지막으로,insertAfter 반환 모든 삽입되는 요소는 반면.후에()가 반환 컨텍스트라고 합니다.

Answer 3

지금까지의 모든 대답은 진흙처럼 분명합니다 ;-) (그래서 나도 찌를 것입니다!)

이 HTML로 시작하면 :

<p id="pOne">Para 1</p>
<p id="pTwo">Para 2 <span id="sMore">More</span></p>

후에 일부 삽입 새로운 일치하는 태그 후의 내용 :

$("p")                       // Match all paragraph tags
    .after("<b>Hello</b>");  // Insert some new content after the matching tags

최종 결과는 다음과 같습니다.

<p id="pOne">Para 1</p><b>Hello</b>
<p id="pTwo">Para 2 <span id="sMore">More</span></p><b>Hello</b>

반면에, 삽입자 하나 이상의 요소를 움직입니다 이미 DOM에 존재합니다 선택된 요소 후 (실제로이 방법을 호출 할 수 있습니다 이후):

$("#sMore")                    // Find the element with id `sMore`
    .insertAfter("#pOne");     // Move it to paragraph one

를 야기하는:

<p id="pOne">Para 1</p><span id="sMore">More</span>
<p id="pTwo">Para 2</p>

Answer 4

( 전 후 ):

$('selector').after('new_content');
$('selector').before('new_content');

while (insertAfter & insertbefore) :

$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');

Answer 5

$("p").insertAfter("#foo");

==

$("#foo").after("p")

Answer 6

을 체크하다 선적 서류 비치:

$("#foo").after("p")

와 같다:

$("p").insertAfter("#foo");

Answer 7

후 (내용) 반환 : jQuery

일치하는 각 요소에 컨텐츠를 삽입하십시오.

insertAfter (selector) 반환 : jQuery

일치하는 모든 요소 세트를 차례로 삽입하십시오.

Answer 8

삽입 된 요소의 속성을 전달하는 것이 ".insertafter"와 함께 작동하지 않지만 ".after"와 함께 작동하는 것 같습니다.

공장:

$('#element').after('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' });

작동하지 않습니다 :

$('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' }).insertAfter('#element');

*편집 : ". 이후"가 아니라 ".appendto"와 함께 작동하지 않는 것 같습니다.

Answer 9

여기 jQuery 메소드 prepend (), prependto (), appendto (), prefore (), insertbefore (), insertAfter (insertAfter (insertAfter)를 사용하여 페이지에 컨텐츠를 추가하는 방법에 대한 아주 좋은 자습서를 찾을 수 있습니다. ), wrap (), wrapall () 및 Wrapinner ()

Answer 10

후에() 그리고 insertAfter () 두 가지 요소가 추가되며, 주요 변화는 체인을 위해 올 것입니다.

~ 안에 after() 선택기 다음에 새 요소를 추가 한 다음 요소에 체인을 사용하는 경우 사용한 기능이 selector 새로 추가 된 요소에 있지 않으며 그 반대는 insertAfter() 예를 들어 새로 추가 된 요소에서 체인이 수행됩니다.

후에() 그리고 insertAfter ()

HTML

<div class="after">After Div</div>
------------------------------------------------------
<div class="insertafter">Insert after div</div>

스크립트

var p='<p>Lorem ipsum doner inut..</p>';
$('.after').after(p)//chaining, performed on .after div not on p
           .css('backgroundColor','pink');
           //you can chain more functions for .after here


$(p).insertAfter('.insertafter')//chaining, performed on p not on .insertafter div
    .css('backgroundColor','yellow');
    // here you can chain more functions for newly added element(p)

위에서 참조하십시오 selector 그리고 contents 두 기능 모두에서 변화하고 있습니다. 다음 목록에 동일하게 적용됩니다.

1. 이전 () vs insertbefore ()
2. 부록 () vs 부록 ()
3. prepend () vs prependto ()
4. 그리고 () 이후 vs insertAfter (), 분명히.

라이브 데모

두 가지를보고 싶다면 성능이 현명합니다. after() 보다 빠릅니다 insertAfter() 보다 After-VS-Insertafter- 성능.

Answer 11

구문을 분리하는 중요한 것은 메모리 누출과 성능이 있다는 것입니다. InsertAfter는 DOM 요소가 많은 경우 인서트보다 효율적입니다. 따라서 후 대신 삽입물을 선호합니다.