Insert span after button

Question

I want to insert a span tag after all button elements.

Here's what I have:

    <button>button text 1</button>
    <button>button text 2</button>
    <button>button text 3</button>

Here's what I want:

    <button><span>button text 1</span><button>
    <button><span>button text 2</span><button>
    <button><span>button text 3</span><button>

I've tried using

    var content = $('button').html();
    $('button').empty().html('<span>' + content + '</span>');

But if I had more than one button on the div it would replicate the first value to the remaining buttons

Answer 1

You could use the jQuery wrapInner() method like such:

$('button').wrapInner('<span></span>')

http://api.jquery.com/wrapinner/

Answer 2

$(document).ready(function() {
  $("button").wrapInner("<span></span>");
});

DEMO: https://jsfiddle.net/42gvqu3q/1/ (inspect elements to see the result)

Description: Wrap an HTML structure around the content of each element in the set of matched elements.

http://api.jquery.com/wrapinner/