jquery, div mit Klassendefinition hinzufügen

Question

So sehe ich hier add a div und hier, wie add a class, aber ich habe Probleme bei der Kombination der beiden. Ich möchte eine ganze Reihe von divs einer bestimmten Klasse und ID innerhalb des div sparkLineContainer generieren.

Ich habe das enthält div

<div id="#sparkLineContainer"></div> 

und ich möchte ein paar der darauf folgenden

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

Schnipsel hinzufügen - ich habe es nicht sehr weit machen, ich bin ratlos

$('#sparkContainer').add("div"); \\ How do I add the id and class to this div? 
            \\ And as a repeat the function will it overwrite this? 

Die Funktion, die ich versuche, dies mit zu tun.

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

}

Answer 1

Sie benötigen .append oder .prepend, um ein Div in den Container hinzuzufügen. Siehe meine Version unten,

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

Auch bemerkte ich, dass Sie ID des div als #sparkLineContainer haben. Sie sollten es wie unten ändern,

<div id="sparkLineContainer"> 
... 

DEMO

Answer 2

add nicht tut, was Sie denken, es tut. Sie suchen nach append oder etwas ähnliches.

Sie die div erste erstellen und ihre Attribute und Inhalte definieren, es dann anhängen:

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

Answer 3

Wahrscheinlich der einfachste Weg ist, einfach die innerHTML- zu ändern:

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

Es gibt andere Möglichkeiten, wie gut, aber das ist die Methode, die ich normalerweise verwende.

Answer 4

Sie können zusammen mit Klasse wie einem div oder anderen Tag hinzufügen:

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