Styles for element not showing after jQuery append

1

I’m working on a feature for a startup website that will have dynamically generated div’s inside a container. Basically I want to overwrite the content that is already on the page with the same HTML structure since the CSS styles are already in place. I tried using element.append(markup) but the CSS styles aren’t present. I copied the HTML structure line for line into a string like

$container.append("<div class='col-md-3 col-sm-3'><div class='item-featured'><div class='image'><div class='quick-view'><i class='fa fa-eye'></i><span>Quick View</span></div><a href='item-detail.html'><div class='overlay'><div class='inner'><div class='content'><h4>Description</h4><p id='description1'>" + featEvents[i].title + "</p></div></div></div><div class='item-specific'><span>Event Header</span></div><img id='image1' src='" + image + "' alt=''></a></div><div class='wrapper'><a href='item-detail.html'><h3 id='eventname1'>" + featEvents[i].short_title + "</h3></a><figure id='address1'>" + featEvents[i].venue.name + "</figure><div class='info'><div class='type'><i><img src='assets/icons/sports/ball-sports/usfootball.png' alt=''></i><span>Sports Event</span></div><div class='rating' data-rating='3'></div></div></div></div></div>");

Any thoughts? I had originally tried to build up the string by concatenating it one piece at a time. Thanks in advance!

2

I’m not a huge jQuery expert:

3

Please check if names of IDs and classes in your project are correct. Maybe you use there a name of class (like “.container”) instead of using name of ID ("#container") or some misspelings like “form” instead of “forms”.

1 Like
4

Thanks for the response! The CSS is already in place in a separate file. With the content that was originally on the page (with the same markup) the quick view and description are hidden until hovered over.

1 Like
5

Fixed! Thank you so much!! haha I was busting my head for like 2 hours over a simple stray hyphen in the class. The class “item-featured” was supposed to be 2 separate classes.

6

I want to tell you one important thing. You do the appending of any html to an element through jQuery .append() method like this:

$("#myElement").append($("<table>"));

This will tell jQuery that you need a new table that will be appended to #myElement.

If you do this thing:

$("#myElement").append($("table"));

Then all the tables in the current page will be moved to inside your #myElement.

So be sure what you are trying to do with .append() method.