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

.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 더 나은 이해는.

---

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

Using this code:

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);

on this target:

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

---

So although these functions flip the parameter order, each creates the same element nesting:

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

...but they return a different element. This matters for method chaining.

---

append() & prepend() are for inserting content inside an element (making the content its child) while after() & before() insert content outside an element (making the content its sibling).

---

The best way is going to documentation.

.append() vs .after()

• .append(): Insert content, specified by the parameter, to the end of each element in the set of matched elements.
• .after(): Insert content, specified by the parameter, after each element in the set of matched elements.

.prepend() vs .before()

• prepend(): Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
• .before(): Insert content, specified by the parameter, before each element in the set of matched elements.

So, append and prepend refers to child of the object whereas after and before refers to sibling of the the object.

---

There is a basic difference between .append() and .after() and .prepend() and .before().

.append() adds the parameter element inside the selector element's tag at the very end whereas the .after() adds the parameter element after the element's tag.

The vice-versa is for .prepend() and .before().

Fiddle

---

There is no extra advantage for each of them. It totally depends on your scenario. Code below shows their difference.

    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>    

---

Imagine the DOM (HTML page) as a tree right. The HTML elements are the nodes of this tree.

The append() adds a new node to the child of the node you called it on.

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

creates a child node <p> to <div>

The after() adds a new node as a sibling or at the same level or child to the parent of the node you called it on.

---

To try and answer your main question:

why would you use .append() rather then .after() or vice verses?

When you are manipulating the DOM with jquery the methods you use depend on the result you want and a frequent use is to replace content.

In replacing content you want to .remove() the content and replace it with new content. If you .remove() the existing tag and then try to use .append() it won't work because the tag itself has been removed, whereas if you use .after(), the new content is added 'outside' the (now removed) tag and isn't affected by the previous .remove().

참고URL : https://stackoverflow.com/questions/14846506/append-prepend-after-and-before