Using jQuery to replace text inside H3 header

Question

I tried to keep the code as simple/clean as possible. There is an h3 inside of two DIVs. The top DIV has an ID, the inner DIV a unique class.

$("#Events .event-header h3").html("your new header");

I also tried:

$("#Events .event-header h3").text("your new header");

Neither work. When I try them in the Chrome console, it tells me that the element I'm referencing is undefined and it doesn't know what text to target. The DIV structure couldn't be more simple and clear. I don't know how else to reference the h3 tag.

Any tips? (I've fixed the typo in the .event-header class - Apparently, posting comments instead of doing that previously is a grave sin. Happy Halloween?)

Answer 1

Your class is .event-header not .events-header

There is an extra "s" at events.

So try this

$("#Events .event-header h3").text("your new header");

Fiddle