jQuery replaceWith find new element

Question

I'm writing a script to replace some images with divs in jQuery. I'm currently using the replaceWith() method, which works fine, but returns the original (removed) element instead of the new element.

The .replaceWith() method, like most jQuery methods, returns the jQuery object so that other methods can be chained onto it. However, it must be noted that the original jQuery object is returned. This object refers to the element that has been removed from the DOM, not the new element that has replaced it.

How can I get a reference to the new DOM element I just created?

possible duplicate of [how to get actual content of an object after being replaceWith('something') in jquery](http://stackoverflow.com/questions/3573521/how-to-get-actual-content-of-an-object-after-being-replacewithsomething-in-jq) — C. Ross, May 25 '11 at 02:06

score 52 · Answer 1 · answered May 25 '11 at 02:09

52

$.fn.replaceWithPush = function(a) {
    var $a = $(a);

    this.replaceWith($a);
    return $a;
};

See a working demo

answered May 25 '11 at 02:09

qwertymk

34,200
28
121
184

Note this only works when a single node is being replaced. If you want to do multiple simultaneous replacements, e.g. $("foobar").replaceWith($a), then only the first one is replaced and the others are dropped, because you can't attach the same DOM node at multiple points in the tree. Evidently the replaceWith("string") variant creates a new DOM node for each replacement, but since it doesn't return those, I think you have to use the find() approach to get them after the fact. – David Soergel Nov 13 '13 at 17:41

score 21 · Answer 2 · answered May 25 '11 at 02:15

21

I believe replaceAll() returns the new content. It has the target and source reversed from replaceWith().

var newobj = $( "<p>New paragraph" ).replaceAll( "#replaceme" );

answered May 25 '11 at 02:15

eaolson

14,717
7
43
58

1

Thanks, but it doesn't really solve my problem because I need to replace different elements with different replacements. – C. Ross May 25 '11 at 11:37
I don't understand your response. If you need replace multiple things, don't you just call the function more than once? – eaolson May 25 '11 at 23:22
For example I want to replace all `` but I need to handle each one individually. – C. Ross May 26 '11 at 00:01
1

C.Ross was not understanding what eaolson say. – Phương Nguyễn Nov 18 '12 at 17:37
This is nice - especially as the documentation doesn't mention this hidden (good) feature! – Antony May 25 '23 at 13:17

mindchasers · Answer 3 · 2013-09-02T17:52:34.470

Precede your call to replaceWith() with a jQuery call to find the parent node and then use the parent to find the new node that was inserted with the replaceWith() function.

Here's an example inside the success handler of a $.ajax() function that replaces a form:

success: function(data,textStatus,jqXHR){
    var $li=$form.parents('li');        
    $form.replaceWith(data);
    var $form=$li.find('form');
    //...
},

In this example, there was a unique form for each li. You may need to tailor your approach depending on how you construct your DOM.

jQuery replaceWith find new element

3 Answers3

See a working demo

Linked