javascript - Javascript。可以在拆分词上添加 id 吗？使用 word.split("")

Question

var wtc = document.getElementById("sw").value;
var cw = wtc.split("").join('    ');
cw.toString();
var x=document.getElementById("demo");
x.innerHTML=cw;

我有这个代码。我如何将 id 添加到拆分（我对我的任期是否正确？？）这个词.. 有可能吗？我想要的是在每个拆分的字母上添加 id。我不知道字母的确切数量，因为它取决于用户输入的单词。

例如。我有这个词来自分裂。

[W][O][R][M]

我希望它是这样的。或任何有 id 的东西 :)

<div id="DIVtext1">W</div> 
<div id="DIVtext2">O</div> 
<div id="DIVtext3">R</div> 
<div id="DIVtext4">M</div> 

谢谢！

Answer 1

你的意思是这样的：

var word = "WORM".split("");
var demoEle = document.getElementById("demo");
for(var w = 0, len = word.length; w < len; w++) {
    var divEle = document.createElement("div");
    divEle.id = "DIVtext"+(w+1);
    divEle.onclick = (function(v) { 
        return function() { copyDiv( "DIVtext" + (v+1) ) };
    })(w);
    divEle.innerHTML = word[w];
    demoEle.appendChild( divEle );
}

演示：jsFiddle

更新演示:: jsFiddle 更新

Answer 2

您可以使用循环 ( for(i=0;i<splittedArray;i++)) 和 jQuery 将 div 标签添加到 dom，其中 innerHtml 是单词。

基本上，一旦你把它放在你的阵列中，你就可以把它放在你想要的任何地方。我发现 jQuery 让它变得简单；但是，您也可以单独通过 jscript 来完成。

Answer 3

这可以很容易地使用jQuery来实现。

var letters = $('#sw').val().split('');

$.each(letters, function(i, letter) {
    $('<div />', {
        id: 'DIVtext'+ i,
        text: letter
    }).appendTo('#demo');
});

JSFiddle

如果 jQuery 不是一个选项，这就是你可以用 vanilla JS 做的事情。

var letters = document.getElementById('sw').value.split(''),
    demo = document.getElementById('demo');

for(var i = 0; i < letters.length; i++) {
    var letter = document.createElement('div');

    letter.innerHTML = letters[i];
    letter.id = 'DIVtext'+ i;

    demo.appendChild(letter);
}

JSFiddle