jquery not working to change inner html?

Question

hey people I\'m new at jquery and i have been trying to figure this out for like the past couple of hours... what the hell am I doing wrong here? All I want to do is change

Answer 1

Since left_menu_bar isn't an element, you can't select it that way.

If it's the ID of an element, try:

$("#left_menu_bar").html("You clicked me!");

If it's the class of an element, try:

$(".left_menu_bar").html("You clicked me!");

Answer 2

Do it like this:

// referencing by id
$("#left_menu_bar").html("You clicked me!");
// referencing by class name ( will apply to all div's with this class )
$(".left_menu_bar").html("You clicked me!");

http://api.jquery.com/html/

Answer 3

You're attempting to assign some text to a property named innerHTML on an object that doesn't have a property named innerHTML.

The $ function in jQuery doesn't return a DOM element. It returns a jQuery object which provides the ability to execute all the wonderful jQuery functions on set particular DOM elements.

One of the functions the jQuery object exposes is .get() which will return one of the elements it contains.

So in your case, you could do:

// 0 means it will return the first element in the jQuery object
$("left_menu_bar").get(0).innerHTML = "You clicked me!";

Or as @helmus stated in his answer, you could use the .html() function that jQuery provides to set the content which actually uses innerHTML on the inside.

Answer 4

jQuery always returns a jQuery collection--not a DOM element. In order to access DOM properties directly, you'll need to retrieve an element from the collection:

$(".left_menu_bar").first().innerHTML = "You clicked me!";

This isn't very convenient, however, and helmus's answer describes the way that things are usually done.