If we have an example structure like this:

HTML

<div id="foo">hello foo</div>

JS

var $foo = $('#foo');

and we need to replace the entire HTML markup for that given jQuery/node reference using jQuery's .replaceWith method, what is the best practice to maintain respectively get a new node reference ?

The problem, .replaceWith returns the reference to the old jQuery object (which sounds more or less unreasonable to me). From the docs:

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.

If I go like

$foo = $foo.replaceWith('<div>new content</div>');

I'd like to have that new node referenced/cached in that same variable. Yes you could re-query that newly inserted DOM node, but that seems very clunky in my mind.

Is there any tricky way to achieve that without the need to re-query the DOM ?

Example: /

If we have an example structure like this:

HTML

<div id="foo">hello foo</div>

JS

var $foo = $('#foo');

and we need to replace the entire HTML markup for that given jQuery/node reference using jQuery's .replaceWith method, what is the best practice to maintain respectively get a new node reference ?

The problem, .replaceWith returns the reference to the old jQuery object (which sounds more or less unreasonable to me). From the docs:

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.

If I go like

$foo = $foo.replaceWith('<div>new content</div>');

I'd like to have that new node referenced/cached in that same variable. Yes you could re-query that newly inserted DOM node, but that seems very clunky in my mind.

Is there any tricky way to achieve that without the need to re-query the DOM ?

Example: http://jsfiddle/Lm7GZ/1/

• javascript
• jquery
• html
• dom

• Just some background: though I get why you feel as if returning the "old" reference is unreasonable (or illogical) it does make sense. Suppose you've bound several event listeners to this element, depending on the user's actions, all of those listeners and callbacks have to be removed (to prevent leaks), but you might want to keep some of them for later use, or you might want to restore the old element. If the old DOM element were to be pletely removed, that would mean rebinding all listeners, too. This would, if anything, feel even more clunky, and would slow your script right down. – Elias Van Ootegem Commented Oct 1, 2012 at 11:24
• @EliasVanOotegem: I'm not sure if I get you right, but for that case there is .fn.detach() available, which would make a lot more sense to store an "old" reference to a node with all listeners and data explicitly, if you wish to. But I just overlooked .replaceAll which pretty much does what I expected. – Andre Meinhold Commented Oct 1, 2012 at 11:42
• I was thinking about one case I recently encountered in particular, perhaps then my ment would make more sense: suppose a table, with some html, On click a row is replaced with a form, using the replaceWith method. After the form is submitted (ajax), the original nodes are restored, along with their listeners and handlers, which were never "gone". in short: the new nodes were temporary, the "old" ones aren't. That's when a reference to the old nodes are darn handy to have lying around, no need to detach and reattach anything... – Elias Van Ootegem Commented Oct 1, 2012 at 11:53

3 Answers 3

Use the .replaceAll() function:

$foo = $('<div>new content</div>').replaceAll($foo);

You can use replaceAll(), swapping the source with the target:

$foo = $('<div>new content</div>').replaceAll($foo);

We can use either way of the following:

$foo = $('<div id="foo">hello foo</div>').replaceAll('#foo'); //As a target string;

OR

$foo = $('#foo');
$foo = $('<div id="foo">hello foo</div>').replaceAll($foo); //As a jQuery Object;

Also we can do the chained queries:

$('<div id="foo">hello foo</div>').replaceAll('#foo').find('something into the newly added html')......