jquery, add div with class definition

Question

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);

}

.add() function doesn't add's a div. It just adds to the matched selector. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Apr 23, 2012 at 15:25

James Montagne · Accepted Answer · 2012-04-23 15:25:48Z

25

add does not do what you think it does. You are looking for append or something similar.

You can create the div first and define its attributes and contents, then append it:

var $newDiv = $("<div/>")   // creates a div element
                 .attr("id", "someID")  // adds the id
                 .addClass("someClass")   // add a class
                 .html("<div>stuff here</div>");

$("#somecontainer").append($newDiv);

answered Apr 23, 2012 at 15:25

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

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

2 Comments

rd42 Over a year ago

I used the same code but with my div names etc. and no div was added to the content and no error either.

James Montagne Over a year ago

All of the posted answer should work, if they don't then you're doing something wrong in applying them.

Selvakumar Arumugam · Accepted Answer · 2012-04-23 15:40:24Z

9

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

edited Apr 23, 2012 at 15:40

answered Apr 23, 2012 at 15:33

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

4 Comments

rd42 Over a year ago

I used the same code but with my div names etc. and no div was added to the content and no error either.

Selvakumar Arumugam Over a year ago

@rd42 Works for me jsfiddle.net/skram/KU4Ry/1 . Also in the markup make sure to change the div ID to sparkLineContainer not `#sparkLineContainer'.

rd42 Over a year ago

Thanks, I was just trying to JSFiddle it

rd42 Over a year ago

I'm still futzing with it. It works in jsfiddle but not in my code yet. I'm still trying...

Ashish Kwatra · Accepted Answer · 2016-04-07 07:35:44Z

3

You can add a div or any other tag along with class like:

$('<div/>',{ class : 'example'}).appendTo("p");

answered Apr 7, 2016 at 7:35

Ashish Kwatra

1291 silver badge5 bronze badges

Comments

Jason Kaczmarsky · Accepted Answer · 2012-04-23 15:26:11Z

2

Probably the easiest way is to just modify the innerHTML:

$("#sparkLineContainer").append('<div class="sparkLine" id="id1"></div>');

There's other ways as well, but this is the method I generally use.

answered Apr 23, 2012 at 15:26

Jason Kaczmarsky

1,6861 gold badge18 silver badges30 bronze badges

4 Comments

Selvakumar Arumugam Over a year ago

Will replace the existing div contents inside #sparkLineContainer. No good!

Jason Kaczmarsky Over a year ago

Modified it to append. I was assuming it was empty at start.

rd42 Over a year ago

I used the same code but with my div names etc. and no div was added to the content and no error either.

Jason Kaczmarsky Over a year ago

Well in your code you have the container id as "#sparkLineContainer", when it should be just "sparkLineContainer". Not sure if that was a typo on SO though.

Collectives™ on Stack Overflow

jquery, add div with class definition

4 Answers 4

2 Comments

4 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related