Error setting HTML variable in jQuery

Question

What I did was load some HTML from the file, and I'm trying to change some elements inside this HTML.

Initialization is as follows:

var id = player_info["ID"]; $("#main_container").append( $("<div />").attr({class: "player_container", id: "player_" + id}).css("display", "none") ); // Add all information to the player container var player_container = $("#player_" + id); player_container.load("player_layout.html"); 

With player_layout.html it looks like this:

 <div class="player_name"> </div> <div class="player_chips"> Chips: <br/> <span class='bidding'></span>/<span class='chips'></span> </div> <div class="player_stats"> Wins / Losses <br/> <span class="wins"></span>/<span class="losses"></span>(<span class="total_games"></span>) <br/><br/> Chips Won / Chips Lost <br/> <span class="chips_won"></span>/<span class="chips_lost"></span> </div> <button class="player_won">Player Has Won</button> 

Then I want to change some elements, in particular classes. An example of how I originally did this:

 player_container.find(".player_name").text(player_info['username']); 

This does not work, so I tried switching switch find to children and text to html , but this does not seem to work. Then I tried this:

 $('> .player_name', player_container).html(player_info['username']); 

but it also did not work. I understand that I can use the DOM to grab childNodes and compare class names, but there are many classes that need to be modified, and I would also like to know if this is possible in jQuery. Thanks in advance for any help.

Answer 1

You need to use the full .load() callback method

 var player_container = $("#player_" + id); player_container.load("player_layout.html", function(){ player_container.find(".player_name").text(player_info['username']); });