Question

var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

var letters = document.createElement("ul");
letters.innerHTML = alphabet;
// This is to split the array "alphabet" into individual strings
 var separatedLetters = document.getElementById("letters");
 separatedLetters.appendChild(letters);

这是我用来尝试拆分字符串的代码，

A，B，C，D，E，F，G，H，I，J，K，L，M，N，O，P，Q，R，S，T，U，V，W，X ，Y，Z

这就是它出现在我的网页上的方式，它显示为一个完整的字符串，而不是每个字母都是一个字符串。

Answer 1

类似以下内容？由于您使用的是无序列表，因此我假设您希望每个字符都放在自己的项目符号上

var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

var ul = document.createElement("ul");
 
 for(var i = 0; i < alphabet.length; ++i) {
     var li = document.createElement("li");
     li.innerText = alphabet[i];
     ul.appendChild(li);
 }
 
 document.body.appendChild(ul);

Answer 2

这里有个例子：

var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

var string = alphabet.join("");// <--- array to string ABCDEFGHIJKLMNOPQRSTUVWXYZ

console.log(string);

var alphabet = string.split("");// <--- string to array

console.log(alphabet);

Answer 3

如前所述，您应该用li包装每个字母，并将每个元素附加到列表中。

此外，为了不引起不必要的回流，您可以利用Document.createDocumentFragment()

HTML：

<div id="letters"></div>

JS：

var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

var separatedLetters = document.getElementById("letters");

var fragment = document.createDocumentFragment();

fragment.appendChild(document.createElement('ul'));

alphabet.forEach(letter => {
    var li = document.createElement('li');
    li.textContent = letter;
    fragment.childNodes[0].appendChild(li);
});

separatedLetters.appendChild(fragment);

如何拆分具有26个不同字符串值的数组，这些字符串值在网页上显示为1个字符串？

3 个答案: