jQuery append ()-추가 된 요소 반환

188

jQuery.append () 를 사용하여 일부 요소를 동적으로 추가하고 있습니다. jQuery 컬렉션이나 새로 삽입 된 요소의 배열을 얻는 방법이 있습니까?

그래서 나는 이것을하고 싶다 :

$("#myDiv").append(newHtml);
var newElementsAppended = // answer to the question I'm asking
newElementsAppended.effects("highlight", {}, 2000);

jquery

— 정신병
소스

4

추가 된 요소에서 jQuery 객체를 얻는 쉬운 방법의

— 푸르스름한

263

이를 수행하는 더 간단한 방법이 있습니다.

$(newHtml).appendTo('#myDiv').effects(...);

처음 만들어 주변이 회전 것들 newHtml로 jQuery(html [, ownerDocument ]), 다음 사용은 appendTo(target)(이하 "주의 To의 끝 부분에 있음을 추가 할"비트) #mydiv.

지금 때문에 시작 과 $(newHtml)의 최종 결과 appendTo('#myDiv')HTML의 새로운 비트이며, .effects(...)전화는에있을 것입니다 새 너무 HTML의 비트.

— 슬랙
소스

2

jQuery를 UI 버전 내가 갖는 1.9.2를 사용하여 effects기능하지 않습니다 ...하지만 effect입니다

— 필립 M

appendTo (target, context)라는 또 다른 서명이 있다고 덧붙입니다. 모든 jQuery 선택기의 경우 특정 컨텍스트 내에서만 target을 검색 할 수 있습니다. 플러그인이나 라이브러리를 작성하는 경우 매우 유용 할 수 있습니다.

— Pierpaolo Cira

1

경우이 오류가 발생합니다 newHtml유효한 HTML 또는 유효한 jQuery를 선택이되지 않습니다 : $('/ This is Not HTML /').appendTo('#myDiv')결과 Uncaught Error: Syntax error, unrecognized expression동안은 $('#myDiv').append('/ This is Not HTML /')대상 요소에 텍스트를 추가하여 제대로 작동합니다.

— Thomas CG de Vilhena

41

// wrap it in jQuery, now it's a collection
var $elements = $(someHTML);

// append to the DOM
$("#myDiv").append($elements);

// do stuff, using the initial reference
$elements.effects("highlight", {}, 2000);

— 카림 79
소스

2

나중에 추가 된 요소에 이벤트를 바인딩하려고 할 때 이것은 효과가 없었습니다. var appendedTarget = $ (newHtml) .appendTo (element)를 사용했습니다. 그런 다음 $ (appendedTarget) .bind ( 'keydown', someFunc)를 사용하여 바인딩 할 수 있습니다.

— Zac Imboden

나는 $elements.effect("highlight", {}, 2000);그렇지 않다고 생각한다 effects.

— 왜

2

추가 후 $ elements 변수가 변경되어 더 이상 사용할 수 없기 때문에 작동하지 않습니다.

— Alex V

@AlexV 이것은 작동하는 것 같습니다. jsbin.com/xivedohofi/1/edit?html,js,output의 라이브 데모를 보십시오 . 또한 유사한 질문 stackoverflow.com/questions/1443233/…에

— Adrien Be

2

최신 버전의 jQuery에서이 문제를 해결 한 것으로 보입니다.

— Alex V

30

var newElementsAppended = $(newHtml).appendTo("#myDiv");
newElementsAppended.effects("highlight", {}, 2000);

— 티아고 벨렘
소스

10

작은 리마인더 요소를 동적으로 추가 될 때, 기능처럼 append(), appendTo(), prepend()또는 prependTo()JQuery와 오브젝트 아닌 HTML DOM 요소를 반환한다.

데모

var container=$("div.container").get(0),
    htmlA="<div class=children>A</div>",
    htmlB="<div class=children>B</div>";

// jQuery object
alert( $(container).append(htmlA) ); // outputs "[object Object]"

// HTML DOM element
alert( $(container).append(htmlB).get(0) ); // outputs "[object HTMLDivElement]"

— 에이지리스 에센스
소스

19

append ()에서 반환 된 요소는 컨테이너이며 새 요소는 아닙니다.

— Tomas

0

나는 당신이 이런 식으로 할 수 있다고 생각합니다 :

var $child = $("#parentId").append("<div></div>").children("div:last-child");

부모 #parentId가 추가에서 반환되므로 jquery children 쿼리를 추가하여 마지막 div 자식을 삽입하십시오.

그런 다음 $ child는 추가 된 jquery 래핑 된 자식 div입니다.

— aff
소스