jquery，添加带有类定义的div答案

【问题标题】：jquery, add div with class definitionjquery，添加带有类定义的div
【发布时间】：2012-04-23 15:22:09
【问题描述】：

所以我在这里看到how to add a div 和这里how to add a class，但我无法将两者结合起来。我想在 div sparkLineContainer 中生成一大堆具有特定类和 id 的 div。

我有包含的 div

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

我想在其中添加一堆以下内容

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

sn-p - 我没走多远，我被难住了

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

我正在尝试使用的功能。

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() 函数不添加 div。它只是添加到匹配的选择器中。

标签： javascript jquery html add

【解决方案1】：

add 并没有按照你的想法去做。你正在寻找append 或类似的东西。

您可以先创建 div 并定义其属性和内容，然后附加它：

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

【讨论】：

我使用了相同的代码，但使用了我的 div 名称等，并且没有将 div 添加到内容中，也没有错误。
所有发布的答案都应该有效，如果他们不这样做，那么你在应用它们时做错了。

【解决方案2】：

您需要.append 或.prepend 才能将 div 添加到容器中。请参阅下面的我的版本，

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

我还注意到您的 div id 为#sparkLineContainer。你应该如下改变它，

<div id="sparkLineContainer"> 
...

DEMO

【讨论】：

我使用了相同的代码，但使用了我的 div 名称等，并且没有将 div 添加到内容中，也没有错误。
@rd42 为我工作 jsfiddle.net/skram/KU4Ry/1 。同样在标记中确保将 div ID 更改为 sparkLineContainer 而不是 `#sparkLineContainer'。
谢谢，我只是想 JSFiddle 它
我还在纠结。它在 jsfiddle 中有效，但在我的代码中还没有。我还在努力……

【解决方案3】：

您可以添加 div 或任何其他标签以及类，例如：

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

【讨论】：

【解决方案4】：

可能最简单的方法就是修改innerHTML：

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

还有其他方法，不过这是我常用的方法。

【讨论】：

将替换 #sparkLineContainer 中现有的 div 内容。不好！
修改为追加。我以为一开始它是空的。
我使用了相同的代码，但使用了我的 div 名称等，并且没有将 div 添加到内容中，也没有错误。
在您的代码中，您的容器 ID 为“#sparkLineContainer”，而它应该只是“sparkLineContainer”。不确定这是否是 SO 的错字。