如何在Java腳本中使用html標簽？
[英]How to use html tag inside a java script?
問題描述
我想顯示這樣的元素，我正在創建一個數組，並使用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>"
有人可以幫我弄這個嗎？？？
7 個解決方案
解決方案1
0 2017-04-14 07:13:32
如果您說它是靜態的，為什么不簡單地將這些數字添加到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
0 2017-04-14 07:13:54
您是否用JavaScript填充了HTML？
"<span class=\"w3-badge\">" + data.push(5) + "</span>"
解決方案3
0 2017-04-14 07:16:29
您將需要使用javascript查找DOM元素並填充它們。 您將通過類名獲取元素，然后循環遍歷它們以重新分配內部html。
var doms = getElementsByClassName( 'w3-badge' );
for( var i = 0; i < doms.length; i++ ) {
doms[ i ].innerHTML = data[ i ];
}
解決方案4
0 2017-04-14 07:17:54
您可以使用javaScript
var test = "<span class='w3-badge'>"+data.push(5)+"</span>";
或ES6嘗試，這將內聯
var test = `<span class='w3-badge'>${data.push(5)}</span>`;
解決方案5
0 2017-04-14 07:20:18
正如標記了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];
});
片段（帶有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>
解決方案6
0 2017-04-14 07:22:05
要將上述的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開頭，可以在這里找到
每一個都返回一個與您的查詢匹配的所有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
0 2017-04-14 07:23:25
正如您標記了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）。
下一步：您不能在雙引號中使用未轉義的雙引號。 使用單個問號，而不是其中之一。
而且您必須使用+連接兩個字符串。
我認為，您沒有Java的基本知識。 在開始擺弄之前，您應該通過以下方式工作： http : //jqfundamentals.com/chapter/javascript-basics （閱讀5-15分鍾）
如何將選定的值傳遞到HTML中的select標記內的Java腳本函數？
[英]How to pass the selected value to java script function inside of select tag in html?
如何將選定的最高和最低價格值傳遞給html中select標簽內的Java腳本函數？
[英]How to pass the selected max and min price value to java script function inside of select tag in html?
Java腳本來提醒選擇的多選項。 <select> HTMl標簽。和標簽。不在里面<form>標簽體
[英]java script to alert the mutile option selected ..in<select> HTMl tag. and tag .is not inside <form>tag body
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何在jQuery或Java腳本中使用HTML
如何到達<span>內部的 html 標簽</span><div>使用 Java 腳本？</div><div id="text_translate"><p> 我有一個放置在div內的span標簽，如下所示：</p><pre> <div onclick="doActiveCheckBox('color1')" id="sss" class="test form-check form-option form-check-inline mb-2"> <input class="test form-check-input" type="radio" name="color" id="color1" data-bs-label="colorOption" value="/تاریک" checked=""> <label class="form-option-label rounded-circle" for="color1"><span style="border:inherit; border-block-color:purple;" class="form-option-color rounded-circle" style="background-image: url(/img/ProductColors/green1.jpg)"></span></label> </div></pre><p> 我想在單擊input標簽時為span標簽設置border ，並且也不想在span中使用任何id 。 我嘗試了以下方法：</p><p> 1：</p><pre> var d=document.getElementById("sss").getElementsByTagName("span"); d.style.border = "thick solid #0000FF";</pre><p> 2：</p><pre> var d=document.getElementById("sss").getElementsByClassName(); for (var i = 1; i <= d.length; i++) { d[1].style.border = "thick solid #0000FF"; }</pre><p> 但他們都沒有正常工作？ 那么有人會幫忙嗎？</p></div>
如何在里面使用 PHP 變量<script> tag
如何將選定的值傳遞到HTML中的select標記內的Java腳本函數？
如何將選定的最高和最低價格值傳遞給html中select標簽內的Java腳本函數？
如何在 html 標簽內使用 javascript 變量
Java腳本來提醒選擇的多選項。 <select> HTMl標簽。和標簽。不在里面<form>標簽體
里面的HTML代碼<Script> tag
里面的html標記<script>
如何在{{each}}標簽內使用jQuery {{html}}標簽？
相關標簽