Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jaime Garay
2,998 PointsAdding a class or ID to an append element
How can I add a class or ID to an append element... for example if I have this code: $(".demo-pricing").append("<button>Botoncillo</button>");
and I want to add a class or id to that append button
$(".demo-pricing").append("<button class="btn">Botoncillo</button>");
2 Answers
Dino Paškvan
Courses Plus Student 44,108 PointsThe content you want to append will have to be wrapped in an element for the append method to work.
So: $(".demo-pricing").append("<span>Botoncillo</span>"); or something like that.
And if you assign that selector to a variable, you can use .addClass to add a class later on, or .attr to add an id.
Take a look at this CodePen for a more detailed example.
Jaime Garay
2,998 PointsA big discussion here haha, thank you so much guys...It's a big help! :D Thanks Dino Paškvan for the example code!!
James Barnett
39,199 PointsJames Barnett
39,199 PointsAdding a class is pretty common and it's easy to do in jQuery, but adding an id sounds like more trouble than it's worth.
Dino Paškvan
Courses Plus Student 44,108 PointsDino Paškvan
Courses Plus Student 44,108 PointsIt's not as common as adding a class, but it's not unheard of either, especially when you're dealing with multiple appends that depend on some comparison.
Adding a class happens mostly for dynamically adding/changing styling to an element. Adding IDs is used for all kinds of logic-oriented tasks in JS.
James Barnett
39,199 PointsJames Barnett
39,199 PointsI get the use case of adding elements into the dom and if you wanted those elements you added to be accessible via JS logic then giving them an ID would make sense. But adding/removing ids to turn on/off logic sounds like more trouble then it's worth considering you are using jQuery so you can just use a class selector.
Dino Paškvan
Courses Plus Student 44,108 PointsDino Paškvan
Courses Plus Student 44,108 PointsHonestly, that way of thinking seems to be following the trend of abandoning IDs altogether in favour of classes. A couple of years ago there were a lot of blogs/individuals/magazines telling us how IDs were evil and should be avoided like the plague and classes were amazing and great, when in fact, a class is just that. It's a class of elements that follow the same behaviour/styling/rules. An ID on the other hand identifies and through the use of a selector selects a specific single element.
Throwing around classes is convenient, but that doesn't mean it's the right thing to do.
Not to mention, if you're really building something massive in JavaScript, you might appreciate the fact that ID selectors are faster than class selectors.
Anyway, for styling purposes, which seems to be the objective here, I don't support adding IDs, that's just silly, but Jaime Garay asked about it, so I threw in an example.