Javascript jquery，添加带有类定义的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10283414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery, add div with class definition
提问by rd42
So I see here how to add a div and here how to add a classbut 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.
所以我在这里看到了如何添加一个 div和这里如何添加一个类，但我无法将两者结合起来。我想在 div sparkLineContainer 中生成一大堆具有特定类和 id 的 div。
I have the containing div
我有包含 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);
}
}
回答by James Montagne
adddoes not do what you think it does. You are looking for appendor something similar.
add不会做你认为它会做的事情。您正在寻找append或类似的东西。
You can create the div first and define its attributes and contents, then append it:
您可以先创建 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);
回答by Selvakumar Arumugam
You need .appendor .prependto add a div to the container. See my version below,
您需要.append或.prepend向容器添加一个 div。看下面我的版本，
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. 你应该改变它如下，
<div id="sparkLineContainer">
...
回答by Ashish Kwatra
You can add a div or any other tag along with class like:
您可以添加 div 或任何其他标签以及类，例如：
$('<div/>',{ class : 'example'}).appendTo("p");
$('<div/>',{ class : 'example'}).appendTo("p");
回答by Jason Kaczmarsky
Probably the easiest way is to just modify the innerHTML:
可能最简单的方法是修改innerHTML：
$("#sparkLineContainer").append('<div class="sparkLine" id="id1"></div>');
There's other ways as well, but this is the method I generally use.
还有其他方法，但这是我通常使用的方法。
