jquery, add div with class definition

addition, html, javascript, jquery

Solution

You need `.append` or `.prepend` to add a div to the container. See my version below,

var $sparkLines = $('.sparkLines');
$("#sparkLineContainer")
   .append('<div id="id' + 
            ($sparkLines.length + 1) + 
            '" class="sparkLines">Some Stuff Here</div>')

Also I noticed that you have id of the div as `#sparkLineContainer`. You should change it as below,

<div id="sparkLineContainer"> 
...

DEMO

Problem

So I see here how to add a div and here how to add a class but I'm having trouble combining the two. I want to generate a whole bunch of div's with a specific class and id within the div sparkLineContainer. I have the containing div ``` <div id="#sparkLineContainer"></div> ``` and I want to add a bunch of the following to it ``` <div id="#sparkLineContainer"> <div class="sparkLines" id="id1">Some stuff here</div> <div class="sparkLines" id="id2">Some stuff here</div> <div class="sparkLines" id="id3">Some stuff here</div> // and so on </div> ``` snippet - I didn't make it very far, I'm stumped ``` $('#sparkContainer').add("div"); \\ How do I add the id and class to this div? \\ And as a repeat the function will it overwrite this? ``` The function I'm trying to do this with. ``` function renderSparklines (array1, sparkLineName, id) { // array1 is the data for the spark line // sparkLineName is the name of the data. // Turn all array values into integers arrayStringToInt(array1); // Create new div of class sparkLines $('#sparkContainer').add("div") // Render new spark line to $('.sparkLines').sparkline(array1, {width:'90px'}); var htmlString = ""; // Content to be added to new div // GENERATE LITTLE SPARK BOX htmlString += '<font class = "blueDescriptor">' + sparkLineName + '</font>'+ '<br>'+ '<font class = "greyDescriptorSmall">Ship to Shore</font>'+ '<br>'+ '<font class = "blackDescriptorSparkLine">' + array1[array1.length-1] + '</font>'+ '<font class = "greenDescriptorSparkline">(' + (array1[array1.length-1] - array1[array1.length-2]) + ')</font>' + '<br>'; $('.sparkLines').prepend(htmlString); ``` }

Original source