如何從字符串中寫入每個字符以使用JavaScript分隔div？

Question

這是我一直什麼遠

這是我的代碼：

function createWordTiles() { 
      var word = ['Example']; 
      var innerDiv; 

      var iDiv = document.createElement('div'); 
      iDiv.id = 'tileBlock'; 
      iDiv.className = "tileBlock"; 

代碼的工作只有我刪除循環：

  for (var l = 0; l <= word.length ; l++) { 

       innerDiv = document.createElement('div'); 
       innerDiv.id = 'Block' + l; 
       innerDiv.className = 'Block'; 
       innerDiv.innerHTML = word.charAt(l); 
      } 

      iDiv.appendChild(innerDiv); 

      document.getElementsByTagName('body')[0].appendChild(iDiv); 
     } 

這是我已取得

如何從字符串中寫入每個字符以使用JavaScript分隔div？

Answer 1

移動你iDiv.appendChild(innerDiv);裏面的for循環，像這樣：

for (var l = 0; l <= word.length ; l++) { 

    innerDiv = document.createElement('div'); 
    innerDiv.id = 'Block' + l; 
    innerDiv.className = 'Block'; 
    innerDiv.innerHTML = word.charAt(l); 

    iDiv.appendChild(innerDiv); 
} 

Answer 2

HTML

<div class="container"> 
    <p class="source-text">Hello world</p> 
</div> 
<ul class="list"></ul> 

JS

jQuery(document).ready(function($) { 
var sourceText = $('.source-text').text(); // get the source text 
var $destinationElm = $('.list'); // get destination 

var i; 
for(i = 0; i < sourceText.length; i++) { // eterate through all characters 
    $destinationElm.append('<li>' + sourceText[i] + '</li>'); // appends html element with text 
}});