addclass() working in console but not working in script

Question

I have created a div dynamically. tried to add class as expanded through jquery its not working. But i tried the code in console, its working fine there.

code are follows:

appending element name

var menuId= '#itemMenu' + indexOfElement;

and then tried this

$(menuId).addClass('expanded');

when i tried folllowing in console

e.g. $('#itemMenu5').addClass('expanded')

its working fine..

Please show a fiddle. The code looks fine, the problem must be somewhere else — Flixer
– Flixer, Commented Feb 6, 2014 at 10:56
the same code is working is reused for other codes already present. its working fine their also — Pandiyan Cool
– Pandiyan Cool, Commented Feb 6, 2014 at 10:58
Did you check the value indexOfElement ? Is is '5' when you're trying to add a class? — Janak
– Janak, Commented Feb 6, 2014 at 10:59

NiiL · Accepted Answer · 2014-02-06 10:59:50Z

1

var menuId= 'itemMenu' + indexOfElement;
var element = document.getElementById(menuId);
element.className += ' expanded';   //note the space

answered Feb 6, 2014 at 10:59

NiiL

2,8371 gold badge29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

George Over a year ago

getElementById Only takes an ID. So the hash sign isn't used.

AfromanJ · Accepted Answer · 2014-02-06 11:43:10Z

1

You can add a class to the dynamic DIV using this example:

HTML

<div id="static">I am static</div>

CSS

.expanded {
    font-size: 20px;   
}
.never-added {
    color: red;
}

JQuery

var indexOfElement = 5;
var menuId = '#itemMenu' + indexOfElement;

//store the new DIV in a var
var newDiv = $('<div/>').text('I am dynamic').attr('id', menuId);
newDiv.insertAfter('#static');

//add the class later
newDiv.addClass('expanded');

//never added
$('#itemMenu5').addClass('never-added');

Here is a Demo

Creating a DIV dynamically then tring to apply a class to it using the ID you assigned i.e $('#itemMenu5').addClass('expanded'); won't work as the DOM does not know about the new element yet.

Assigning the new element to a variable will allow you to modify it.

EDIT:
I have added an example that shows a class of never-added which never gets aded to the new DIV.

edited Feb 6, 2014 at 11:43

answered Feb 6, 2014 at 11:24

AfromanJ

3,9323 gold badges20 silver badges34 bronze badges

2 Comments

Pandiyan Cool Over a year ago

how to assign the created div to a variable? other than this? var newDiv = $('<div/>').text('I am dynamic').attr('id', menuId);

AfromanJ Over a year ago

This will also work var newDiv = $('<div id="'+ menuId +'">I am dynamic</div>');. How are you currently creating the DIV?

Marco A. · Accepted Answer · 2014-02-06 11:20:09Z

0

You might try with:

$("#menuId").addClass('expanded');  try directly

edited Feb 6, 2014 at 11:20

Marco A.

43.8k27 gold badges146 silver badges263 bronze badges

answered Feb 6, 2014 at 10:58

Vikas Gautam

9788 silver badges25 bronze badges

1 Comment

Vikas Gautam Over a year ago

have ou included jquery file or writing the code in $(ducument).ready function() { });

Collectives™ on Stack Overflow

addclass() working in console but not working in script

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related