Replace all span tag in webpage

Question

I have a problem because I want replace all span in page to tag b.

Here is demo but is bad. to change all span I must click 2x on the button

Jquery:

$('#myButton').click(function(){
    $("span").replaceWith(function(){
        return $("<b>" + $(this).html() + "</b>");
    });
});

Html:

    <span>fdfdfd <span>hytrytryrt</span> fdfdfdf</span>

<button id="myButton">Change my link to a span</button> 

Here is link:

http://jsfiddle.net/kXfX9/

Answer 1

I just got an idea!, Try to reverse the element collection and then invoke .replaceWith()

$('#myButton').click(function(){
    $($("span").get().reverse()).replaceWith(function(){
        return $("<b>" + $(this).html() + "</b>");
    });
});

DEMO

Answer 2

<span>fdfdfd <span>hytrytryrt</span> fdfdfdf</span>

<button id="myButton">Change my link to a span</button>

$('#myButton').click(function(){
    $("span").replaceWith(function(){
        return $("<b>" + $(this).text() + "</b>");
    });
});

http://jsfiddle.net/Tm4Qv/1/

Answer 3

First of all you have invalid markup. it should be:

 <span>fdfdfd</span> <span>hytrytryrt</span> <span>fdfdfdf</span>

and to change spans with b:

$('#myButton').click(function(){
$("span").each(function(){
    $(this).replaceWith("<b>" + $(this).html() + "</b>");
});});

Working Demo

Answer 4

Change your html like this

 $('#myButton').on('click',function(){
        $("span").replaceWith(function(){
            return $("<b>" + $(this).text() + "</b>");
        });
    });

note

Prior to jQuery 1.9 , .replaceWith() would attempt to add or change nodes in the current jQuery set if the first node in the set was not connected to a document, and in those cases return a new jQuery set rather than the original set. The method might or might not have returned a new result depending on the number or connectedness of its arguments!

As of jQuery 1.9 , .replaceWith() always return the original unmodified set . Attempting to use these methods on a node without a parent has no effect—that is, neither the set nor the nodes it contains are changed.

Answer 5

This is probably best done with plain JavaScript, without jQuery. You simply get all the span elements and replace, in the DOM, each of them by a b element that you create, assigning the content of the span to it.

<button id="myButton" onclick="chg()">Change span to b</button> 
<script>
function chg() {
  var spans = document.getElementsByTagName('span');
  for(var i = spans.length - 1; i >= 0; i--) {
    var b = document.createElement('b');
    b.innerHTML = spans[i].innerHTML;
    spans[i].parentNode.replaceChild(b, spans[i]);
  }
}
</script>

The for loop runs “backwards”, because the getElementsByTagName method returns a live collection of elements in tree order. So if you started from index 0, you would (in the simple example) first process the outer span element, and when you get at the inner one, the collection has shrunk so that it only has one member, at index 0, and the inner span thus won't be processed.

This code does not copy any of the attributes of the span elements; if there are attributes to be retained, add code for copying them.

PS I suspect that real problem is essentially different from the one presented, since changing all span elements to b elements would make sense in rather special situations only, and the button text “Change my link to a span” in the question does not match the description or the code fragment at all.