如何在java腳本中使用html標籤？

I want to display elements like this我正在創建一個數組，並使用javascript將一些數字推入該數組中。推送一個數字後，我試圖使用一個HTML標籤，在圈內顯示該數字。但是我在做這件事的時候遇到了麻煩。如何在java腳本中使用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>"

有人可以幫我這個???

來源

2017-04-14 toni

*其實我想用JavaScript加載這些數字* - 你的意思是你想用JS創建這些徽章？ – niksofteng

是的！我想用這些數字創建徽章。哪些是用戶給出的。 – toni

爲什麼不簡單地將這些數字添加到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>

來源

2017-04-14 07:13:32 Ionut

你填補這一HTML與JavaScript？

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

來源

2017-04-14 07:13:54

您將需要使用javascript來查找DOM元素並填充它們。您將按類名獲取元素，然後遍歷它們以重新分配內部html。

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

來源

2017-04-14 07:16:29

您可以使用JavaScript

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

或ES6嘗試，這將工作直列

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

來源

2017-04-14 07:17:54 Mazz

正如您所標記的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) { 
 
\t 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++){ 
 
\t console.log(i + " = " + data[i]); 
 
\t 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

來源

2017-04-14 07:20:18 NullDev

要插入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>

你也可以創建一個字符串s你想要的HTML代碼，並調用

document.body.append(s);

將跨度添加到文檔正文

有很多方法可以獲得DOMS的值也是如此。

大多開始document.getElementsBy，可以發現here

這些返回所有符合您查詢的HTML延遲性肌肉痠痛的數組。

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>

來源

2017-04-14 07:22:05

爲你添加了標籤的jQuery，我會告訴你一個jQuery方式：

你必須有一個父元素，假設它是一個ID爲「數字」的ID，你可以：

var numbers = $('#numbers'); 

for(var i = 0; i < data.length; i++) { 
    numbers.append($('<span class="w3-badge">'+data[i]+'</span>')); 
}

With data.push（ num）你將num推到數組中的下一個自由索引。使用data [index]可以獲得給定索引處的值（num）。

下一點：您不能在雙引號標記內使用未轉義的雙引號。使用單個問號而不是其中的一個。

而你必須使用+連接兩個字符串。

我覺得，你沒有得到Javascript的基礎知識。在開始擺弄之前，你應該像這樣工作：http://jqfundamentals.com/chapter/javascript-basics（〜5-15分鐘閱讀）

來源

2017-04-14 07:23:25

如何在java腳本中使用html標籤？

回答

相關問題