.append (), prepend (), .after () 및 .before ()

나는 코딩에 능숙하지만 지금은 기본적으로 같은 일을하는 것처럼 보입니다. 사용하는 이유 여기 내 주요 질문은, .append()보다는 .after()또는 그 구절?

나는 찾고 있었으며 둘 사이의 차이점과 사용시기 및 사용하지 않을 때의 차이점에 대한 명확한 정의를 찾지 못하는 것 같습니다.

다른 하나 이상의 장점은 무엇이며 왜 다른 하나를 사용합니까? 누군가 나에게 이것을 설명해 주시겠습니까?

var txt = $('#' + id + ' span:first').html();
$('#' + id + ' a.append').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').append(txt);
});
$('#' + id + ' a.prepend').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').prepend(txt);
});
$('#' + id + ' a.after').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').after(txt);
});
$('#' + id + ' a.before').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').before(txt);
});

보다:

.append()소자 내부에 둔다 데이터 last index와
.prepend()두고 ELEM를 붙이는에서first index

가정 :

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
</div>

때 .append()이 실행이 다음과 같이 표시됩니다

$('.a').append($('.c'));

실행 후 :

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

실행시 .append ()로 바이올린을 피우십시오.

때 .prepend()이 실행이 다음과 같이 표시됩니다

$('.a').prepend($('.c'));

실행 후 :

<div class='a'> //<---you want div c to append in this
  <div class='c'>c</div>
  <div class='b'>b</div>
</div>

실행시 .prepend ()로 바이올린을 피우십시오.

.after()
.before()요소 앞에 요소를 놓는다 요소 앞에 요소를 놓는다

사용 후 :

$('.a').after($('.c'));

실행 후 :

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here

실행시 .after ()로 피들 링하십시오.

전에 사용 :

$('.a').before($('.c'));

실행 후 :

<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>

실행 중 .before ()로 바이올린

이 이미지는 아래에 표시 명확한 이해를 제공하고 사이의 정확한 차이를 보여 .append(), .prepend(), .after()및.before()

당신은 그 이미지에서 볼 수 .append()와 .prepend()같은 새로운 요소를 추가 자식 요소 (브라운 색상) 대상에.

그리고 .after()와 .before()같은 새로운 요소를 추가 형제 요소 (컬러 블랙) 대상으로합니다.

여기입니다 DEMO 더 나은 이해는.

편집 : 해당 기능의 뒤집힌 버전 :

이 코드를 사용하여 :

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');

$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);

이 목표에 :

<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

따라서 이러한 함수는 매개 변수 순서를 바꾸지 만 각각 동일한 요소 중첩을 만듭니다.

var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))

...하지만 다른 요소를 반환합니다. 이것은 메소드 체인에 중요합니다 .

append()& prepend()는 요소 내부에 내용을 삽입하고 (콘텐츠를 자식으로 만들기) after()& before()요소 외부에 내용을 삽입하고 (내용을 형제로 만들기) 것입니다.

가장 좋은 방법은 문서화입니다.

.append() vs .after()

• . append(): 매개 변수로 지정된 컨텐츠 를 끝에 삽입 를 일치하는 요소 세트의 각 요소 .
• . after(): 일치하는 요소 세트의 각 요소 뒤에 매개 변수로 지정된 컨텐츠를 삽입하십시오 .

.prepend() vs .before()

• prepend(): 매개 변수로 지정된 컨텐츠 를 처음에 삽입 를 일치하는 요소 세트에서 각 요소 에 .
• . before(): 일치하는 요소 세트의 각 요소 앞에 매개 변수로 지정된 컨텐츠를 삽입하십시오 .

따라서 append와 prepend는 객체의 자식을 나타내며 after와 before는 객체의 형제를 나타냅니다.

사이에 기본적인 차이가 .append()와 .after()와 .prepend()와 .before().

.append()선택기 요소의 태그 안에 매개 변수 요소를 맨 끝에.after() 추가하는 반면 , 요소의 태그 뒤에 매개 변수 요소를 추가합니다 .

부회장 반대를위한 것입니다 .prepend()및 .before().

깡깡이

각각에 대해 추가적인 이점은 없습니다. 전적으로 시나리오에 따라 다릅니다. 아래 코드는 차이점을 보여줍니다.

    Before inserts your html here
<div id="mainTabsDiv">
    Prepend inserts your html here
    <div id="homeTabDiv">
        <span>
            Home
        </span>
    </div>
    <div id="aboutUsTabDiv">
        <span>
            About Us
        </span>
    </div>
    <div id="contactUsTabDiv">
        <span>
            Contact Us
        </span>
    </div>
    Append inserts your html here
</div>
After inserts your html here

<div></div>    
// <-- $(".root").before("<div></div>");
<div class="root">
  // <-- $(".root").prepend("<div></div>");
  <div></div>
  // <-- $(".root").append("<div></div>");
</div>
// <-- $(".root").after("<div></div>");
<div></div>    

DOM (HTML 페이지)을 트리로 상상해보십시오 . HTML 요소는이 트리의 노드입니다.

는 append()받는 새 노드 추가 child당신이 그것을라는 노드를.

Example:$("#mydiv").append("<p>Hello there</p>") 

creates a child node <p> to <div>

이 명령 after()은 형제로서 또는 동일한 레벨 또는 하위에있는 새 노드를 호출 한 노드의 상위에 추가합니다.

주요 질문에 답하고 답하십시오 .

왜 .after () 또는 .append () 대신 .append ()를 사용합니까?

jquery로 DOM을 조작 할 때 사용하는 메소드는 원하는 결과에 따라 다르며 자주 사용하는 것은 내용을 대체하는 것입니다.

컨텐츠를 바꾸는 .remove()경우 컨텐츠를 바꾸고 새 컨텐츠로 바꾸십시오. 당신이 경우 .remove()다음 기존의 태그와 것은 사용하려고 .append()당신이 사용하는 경우 반면, 그렇지 않은 작업 태그 자체가 제거 된 것이기 때문에 .after(), 새로운 내용이 '외부'는 (지금 제거) 태그를 추가하고 이전의 영향을받지 않습니다 .remove().