I want to display elements like this 我正在创建一个数组并使用javascript将一些数字推入该数组。推送一个数字后，我正在尝试使用一个html标签，在圆圈内显示该数字。但是我这样做时遇到了麻烦。
这是我将元素推送到数组中的javascript：
data.push(5);
data.push(6);
data.push(4);
现在数组将由元素5,6,4组成。现在我想使用一些html标签显示这些元素。
我用来显示这些元素的html标签是：
<span class="w3-badge">5</span>
<span class="w3-badge">6</span>
<span class="w3-badge">4</span>
然后这些元素将以圆圈显示。这是静态的，因为我在html标签中给出了数字。实际上我想用javascript加载这些数字。
我正在尝试这种方式，但它无法正常工作：
"<span class="w3-badge">"data.push(5);"</span>"
"<span class="w3-badge">"data.push(6);"</span>"
"<span class="w3-badge">"data.push(5);"</span>"
有人可以帮我这个???
答案 0 :(得分：0)
为什么不简单地将这些数字添加到array，如果您说它是静态的，然后使用array循环解析for添加HTML代码？您需要使用正确的引号正确转义并连接：
var test = [];
var data = [5, 6, 4];
for(var i = 0; i < data.length; i++){
test += "<span class='w3-badge'>" + data[i] + "</span>";
}
document.getElementById('container').innerHTML = test;<div id='container'>
</div>
答案 1 :(得分：0)
您是否使用javascript填充此HTML？
"<span class=\"w3-badge\">" + data.push(5) + "</span>"
答案 2 :(得分：0)
您需要使用javascript来查找DOM元素并填充它们。您将按类名获取元素，然后循环遍历它们以重新分配内部html。
var doms = getElementsByClassName( 'w3-badge' );
for( var i = 0; i < doms.length; i++ ) {
doms[ i ].innerHTML = data[ i ];
}
答案 3 :(得分：0)
您可以使用javaScript
var test = "<span class='w3-badge'>"+data.push(5)+"</span>";
或ES6尝试，这将内联工作
var test = `<span class='w3-badge'>${data.push(5)}</span>`;
答案 4 :(得分：0)
正如您标记了JQuery，这是一个干净的版本，它使用类w3-badge遍历每个元素：
var data = [];
data.push(5);
data.push(6);
data.push(4);
$('.w3-badge').each(function(i, obj) {
document.getElementById(i).innerHTML = data[i];
});
Snippet（使用CSS Circle）：
var data = [];
data.push(5);
data.push(6);
data.push(4);
$('.w3-badge').each(function(i, obj) {
document.getElementById(i).innerHTML = data[i];
});.cl {
border-radius: 50%;
behavior: url(PIE.htc);
width: 36px; height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="0" class="cl w3-badge">0</span>
<span id="1" class="cl w3-badge">0</span>
<span id="2" class="cl w3-badge">0</span>
纯JavaScript版本：
注意：您必须为每个元素提供一个从零开始的ID
这不是一个漂亮的版本，但它有效：
var data = [];
data.push(5);
data.push(6);
data.push(4);
for (i = 0; i < data.length; i++){
console.log(i + " = " + data[i]);
document.getElementById(i).innerHTML = data[i];
}
演示：
var data = [];
data.push(5);
data.push(6);
data.push(4);
for (i = 0; i < data.length; i++){
console.log(i + " = " + data[i]);
document.getElementById(i).innerHTML = data[i];
}.cl {
border-radius: 50%;
behavior: url(PIE.htc);
width: 36px; height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}<span id="0" class="cl w3-badge">0</span>
<span id="1" class="cl w3-badge">0</span>
<span id="2" class="cl w3-badge">0</span>
答案 5 :(得分：0)
要首先将如上所述的DOM插入HTML，请执行以下操作：
var span1 = document.createElement("span");
span1.className = "w3-badge";
span1.innerHTML = 5; //create a span as above and set 5 between it
document.body.append(span1); //add completed span obj to document body<body></body>
您还可以使用所需的html代码创建字符串s，然后调用
document.body.append(s);
将范围添加到文档正文
有很多方法可以获得DOMS的值。
其中大多数以document.getElementsBy开头，可以找到here
每个都会返回与您的查询匹配的所有html dom的数组。
document.getElementById()特别会返回一个元素，因为只有一个元素在html中应该有一个给定的id。
然后，您可以将.innerHTML调用到使用任何这些方法选择的特定DOM
所以在你的
var data = [];
var spans = document.getElementsByClassName("w3-badge");
for( var i =0; i < spans.length; i++){
data.push(spans[i].innerHTML);
}
console.log(data);<span class="w3-badge">5</span>
<span class="w3-badge">6</span>
<span class="w3-badge">4</span>
答案 6 :(得分：0)
因为你已经标记了jquery，我将向你展示一个jQuery方式：
你必须有一个父元素，假设它是一个id为“数字”的div，你可以只是：
var numbers = $('#numbers');
for(var i = 0; i < data.length; i++) {
numbers.append($('<span class="w3-badge">'+data[i]+'</span>'));
}
使用data.push（num）将num推送到数组中的下一个空闲索引。 使用data [index]，您将获得给定索引处的值（num）。
下一点： 您不能在双引号内使用未转义的双引号。 使用单个问号而不是其中一个。
你必须使用+来连接两个字符串。
我认为，你没有Javascript的基础知识。 你应该在开始摆弄之前先做这样的事情：http://jqfundamentals.com/chapter/javascript-basics（阅读时间约为5-15分钟）