使用jQuery更改文本

Question

I have a script that is pulling in news from Yahoo on a certain subject. It renders the title of the news feed like this:

<div class="header-title">subject - Yahoo! News Search Results</div>

I would like to change this to read differently. Since this is inserted via JS I thought I could change this with jQuery.

I attempted this:

$('.header-title').text('Subject News');

that did not work, I then attempted this:

$('.header-title').empty();
$('.header-title').text('Subject News');

that also did not work.

Both of the above methods look as if they had no effect on the text.

I am not sure what to do to remove the old text and replace with my text.

Note: All of my code is inside jQuery's Document Ready IE:

$(function(){ 
   //Code Here 
});    

Answer 1

Don't forget to put your code in DOM ready :

$(function() {
    $(".header-title").text("Subject News");
});

Otherwise the code should work fine.

Answer 2

This solution assumes you have no access to the other script that creates the feed widget

WIthout knowing more about other script it sounds like it is asynchronous, and creates the title elements also. You could have a timed interval loop that checks for the element to exist and once it exists do the update:

function changeYahooTitle(){
     var $yhooTitle=$('.header-title');
    if($yhooTitle.length){
        $yhooTitle.text('My New Title');
    }else{
        /* doesn't exist so check again in 1/10th second, will loop recursively until found*/
        setTimeout(changeYahooTitle, 100);
    }
}

Then on page load:

$(function(){
  changeYahooTitle()

})

If you do have access to the other script it can be modified to accommodate your needs, or you can still use this solution

Answer 3

Try using html() instead of empty() and text()

$(document).ready(function(){
    $(".header-title").html("Subject News");
});

Answer 4

What's probably happening:

1. First you're setting the text: $('.header-title').text('Subject News');

2. THEN ... after the data finishes the load of the Yahoo or whatever content your text gets replaced actually with the new fetched data

   Change the text inside the load callback (after data is loaded) and it will work.

Answer 5

It doesn't work because you call the function before the element is created. If you put your function inside <script> tag after the <div> element it should work