將字符串轉換為字母數組，然后輸出每個SPAN

Question

我正在嘗試將字符串轉換為字母數組，但只使用JavaScript（沒有jQuery）

現在我已經解決了這個問題，但我知道我錯過了更多，我知道有jQuery，但我想了解更多有關vanilla JS的信息

function myFunction() {
    var str = 'Test';
    var split = str.split("");
    document.getElementById('demo').innerHTML = '<span class="test">' + split + '</span>';
}
myFunction()

Answer 1

你是如此接近答案，你只需要迭代數組：

function myFunction() {
    var str = 'Test';
    var split = str.split("");
    var html = '';
    for(let i = 0; i < split.length; i++) {
        html += '<span class="test">' + split[i] + '</span>';
    }
    document.getElementById('demo').innerHTML = html;
}
myFunction()

Answer 2

您可以通過將每個字母映射到span元素然后加入結果來構造所需的html字符串：

 function myFunction() { var str = 'Test'; var split = str.split(""); document.getElementById('demo').innerHTML = split.map(letter => `<span class="test">${letter}</span>`).join(''); } myFunction() 

 <div id="demo"></div> 

Answer 3

嘗試這個

function myFunction() {
    var str = 'Test';
    var split = str.split('');
      split.forEach((e)=>{
   var span= document.createElement("span"); 
   var textnode = document.createTextNode(e);
   span.appendChild(textnode);document.getElementById("demo").appendChild(span); 
    })

}
myFunction()

檢查小提琴

Answer 4

您可以通過將字符串字符擴展到數組然后映射數組，使用innerHTML屬性將span標記中包含的每個字符"e"推送到#demo div元素， #demo ：

[...str].map(e => document.getElementById('demo').innerHTML += `<span class="test">${e}</span>`;

---

檢查並運行以下代碼片段以獲取上述實際示例：

 /* JavaScript */ function myFunction(str) { [...str].map(e => document.getElementById('demo').innerHTML += `<span class="test">${e}</span>` )} myFunction("Test"); myFunction("Hello"); 

 /* CSS */ .test {display: block; background-color: green; margin: 5px 0px;text-align:center; font-size: 20px;} 

 <!-- HTML --> <div id="demo"></div>