Using $(this) after .replaceWith()

Question

Please consider the below HTML and Javascript. In the script, I am replacing an a tag with a p tag. I am expecting the alert() function to return the contents of the p tag but instead it returns the contents of the original a tag which no longer exists.

How can I reference the new element?

HTML:

<a href="">This is a link</a>

Javascript:

$(document).ready(function() {
    $("a").each(function() {
        $(this).replaceWith('<p>New Paragraph</p>');
        alert($(this).text());
    });
});

Toowoomba

Answer 1

You can't do it directly with .replaceWith(), but you can create it separately. Try this:

$(document).ready(function() {
    $("a").each(function() {
        var p = $('<p>New Paragraph</p>');
        $(this).replaceWith(p);
        alert(p.text());
    });
});

Kazimir

Answer 2

You can use the replaceAll method instead, which returns the new content instead of the original content:

$(document).ready(function() {
  $("a").each(function() {
    alert($('<p>New Paragraph</p>').replaceAll($(this)).text());
  });
});

Evidentiary

Answer 3

Try this:

alert($(this).replaceWith('<p>New Paragraph</p>').text());

Sniffle

This won't work, .replaceWith() returns the previous object, the <a>, not the <p> it replaced it with. – Kazimir

That doesn't work. The replaceWith method returns the original jQuery object with the original element, not a new jQuery object with the new element. api.jquery.com/replaceWith – Evidentiary