jQuery wrap an element after replaceWith method but not work [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

---

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 3 years ago.

Improve this question

I tried to wrap a div after replace the original element from div to input but not work, could anyone suggest what wrong with my code below, thanks.

$('.sth').replaceWith(
    $('<input>', {
        value: $('.sth').text(),
        type: 'text'
    })
).wrap('<div class="new" />');

Demo: http://jsfiddle.net/zhmUK/1/

Answer 1

http://api.jquery.com/replaceWith/

Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

$('.sth').replaceWith(
    $('<input>', {
        value: $('.sth').text(),
        type: 'text'
    }).wrap('<div class="new" />').parent()
);

Answer 2

replaceWith returns your removed .sth element . Citation:

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.

So you're wrapping the wrong element, element that is not in the DOM anymore.

From here: http://api.jquery.com/replaceWith/

Answer 3

you can try

$('.sth').wrap('<div class="new" />').replaceWith(
    $('<input>', {
        value: $('.sth').text(),
        type: 'text'
    })
);