.syslog 프리펜드 .after() 및 .before()

.syslog 프리펜드 .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가 있습니다.

---

EDIT: 이러한 기능의 뒤집힌 버전:

다음 코드 사용:

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()대.after()

• .:append() 일치하는 요소 집합의 각 요소 끝에 매개 변수로 지정된 내용을 삽입합니다.
• .:after() 일치하는 요소 집합의 각 요소 뒤에 매개 변수로 지정된 내용을 삽입합니다.

.prepend()대.before()

• : 일치하는 요소 집합의 각 요소의 선두에 파라미터로 지정된 내용을 삽입합니다prepend().
• .:before() 일치하는 요소 집합의 각 요소 앞에 매개 변수로 지정된 내용을 삽입합니다.

즉, append와 prepend는 객체의 하위 항목을 의미하고, after와 before는 객체의 형제 항목을 의미합니다.

으로는 차이가 있다.append() ★★★★★★★★★★★★★★★★★」.after() ★★★★★★★★★★★★★★★★★」.prepend() ★★★★★★★★★★★★★★★★★」.before().

.append()selector 요소의 태그 맨 끝에 파라미터 요소를 추가합니다..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()나 verse가 아닌 .filter()를 사용합니까?

jquery를 사용하여 DOM을 조작할 때 사용하는 방법은 원하는 결과에 따라 다르며, 자주 사용하는 방법은 내용을 교체하는 것입니다.

때 "" " " " " " 입니다..remove()이치노 당신이 가 if if if if.remove()하고 나서, 「」를 ..append()에 안 로 '태그'를 하면 '태그'가 요..after()'삭제 태그의 받지 .remove().

언급URL : https://stackoverflow.com/questions/14846506/append-prepend-after-and-before