如何使用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
}});