如何在 javascript 中使用 html 标签？答案

【问题标题】：How to use html tag inside a java script?如何在 javascript 中使用 html 标签？
【发布时间】：2017-09-10 10:32:01
【问题描述】：

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

有人可以帮我吗？？？

【问题讨论】：

其实我想用 javascript 加载这些数字 - 你的意思是你想用 JS 创建这些徽章吗？
是的！我想用这些数字创建徽章。哪些是用户给定的。

标签： javascript jquery html css arrays

【解决方案1】：

如果您说它是静态的，为什么不简单地将这些数字添加到array，然后使用for 循环解析array 以添加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>

【讨论】：

【解决方案2】：

你是在用 javascript 填充这个 HTML 吗？

"<span class=\"w3-badge\">" + data.push(5) + "</span>"

【讨论】：

【解决方案3】：

您将需要使用 javascript 来查找 DOM 元素并填充它们。您将通过类名获取元素，然后遍历它们以重新分配内部 html。

var doms = getElementsByClassName( 'w3-badge' );
for( var i = 0; i < doms.length; i++ ) {
    doms[ i ].innerHTML = data[ i ];
}

【讨论】：

【解决方案4】：

你可以使用 javaScript

var test = "<span class='w3-badge'>"+data.push(5)+"</span>";

或 ES6 尝试，这将内联工作

var test = `<span class='w3-badge'>${data.push(5)}</span>`;

【讨论】：

【解决方案5】：

正如您已标记 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];
});

JSFiddle Demo

片段（带有 CSS 圆圈）：

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>

JSFiddle Demo

【讨论】：

【解决方案6】：

要将如上所述的 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

&lt;body&gt;&lt;/body&gt;

你也可以用你想要的html代码创建一个字符串s，然后调用

document.body.append(s);

将 span 添加到文档正文中

还有很多方法可以获取 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>

【讨论】：

【解决方案7】：

既然你已经标记了 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 分钟的阅读时间）

【讨论】：