How to replace the inner HTML of a div with text using jquery?

Question

Below in the HTML, rendered in page.

<div class="breadcrumb">
<span class="breadcrumb-trail" id="ctl00_ContentPlaceHolder1_ctl00_bc_content"><a title="" href="/default.aspx" target="_self">Home</a> &gt; <a title="" href="/summary.aspx?sid=105&amp;pid=133" target="_self">Summary</a></span>
</div>

On document ready function, I have to replace

<a title="" href="/summary.aspx?sid=105&amp;pid=133" target="_self">Summary</a>

with

Summary

So that the HTML is changed to following :

<div class="breadcrumb">
<span class="breadcrumb-trail" id="ctl00_ContentPlaceHolder1_ctl00_bc_content"><a title="" href="/default.aspx" target="_self">Home</a> &gt; Summary</span>
</div>

How can i do this with jQuery ?

Answer 1

Try This:

$(document).ready(function(){
    var text = $('#ctl00_ContentPlaceHolder1_ctl00_bc_content a:last-child').text();
    $('#ctl00_ContentPlaceHolder1_ctl00_bc_content a:last-child').remove();
    $('#ctl00_ContentPlaceHolder1_ctl00_bc_content').append(text);
});

Demo

Or you can use:

 var text = $('#ctl00_ContentPlaceHolder1_ctl00_bc_content a:last-child').text();
 $('#ctl00_ContentPlaceHolder1_ctl00_bc_content a:last-child').replaceWith(text);

Demo

Answer 2

Working demo http://jsfiddle.net/B4CrS/

Your Ids look like user control Visual studio generated you could do this simply!

This will fit your need :)

Code

$(document).ready(function () {
    $('a').filter(function (index) {
       if ($(this).text() === "Summary")
           $(this).replaceWith('Summary');
        return $(this).text() === "Summary";
    });

});

Answer 3

use jQuery.replaceWith

var node = $(".breadcrumb-trail > a:last-child");
var text = node.text();
node.replaceWith( text );

You can change the selector based on your need. Current selector selects the last child "a" inside element with breadcrumb-trail class.

Answer 4

$('.breadcrumb-trail a:contains("Summary")').replaceWith('Summary');

or

$(".breadcrumb-trail a").last().replaceWith('Summary');

could work, if you want it shorter.

made a fiddle: http://jsfiddle.net/filever10/erpEN/

Answer 5

Consider using thttp://api.jquery.com/html/

$(document).ready(function(){
    $("#ctl00_ContentPlaceHolder1_ctl00_bc_content").html("Summary")
}