如何在.innerHTML（for-loop）中迭代字符串的每个字符？

Posted 2023-05-07

【中文标题】如何在.innerHTML（for-loop）中迭代字符串的每个字符？

【英文标题】：How to iterate each character of a string in .innerHTML (for-loop)?

【发布时间】：2019-08-09 21:59:29

【问题描述】：

嗨，假设我有以下代码：

var information_paragraph = document.getElementById(myDivElement);
var infoText = "Hello World!";
information_paragraph.innerhtml = infoText;

因此，我没有添加整个字符串“Hello World！”，而是考虑是否可以一次添加该字符串的一个字符。如何访问字符串的字符并创建一个for循环在innerHTML中添加内容而不是替换它？

【问题讨论】：

How can I process each letter of text using javascript? 和 Appending using native javascript 的可能重复

for(var char of text)?

【参考方案1】：

将字符串转换为数组并迭代？

document.getElementById('block').innerHTML.split('').forEach(function(i)
  console.log(i);
);

<div id="block">Text</div>

【讨论】：

@nickzoum 有很多变体可以做到这一点，它就是其中之一

你似乎没有完全回答这个问题：如何访问字符串的字符并创建一个for循环来在innerHTML中添加内容而不是替换它

【参考方案2】：

我认为你想要的是将字符串用作数组并将其附加到内部 html 如果你把它全部放在一个理智的行中删除"</br>"+

var information_paragraph = document.getElementById("myDivElement");
var infoText = "Hello World!";
for(i = 0; i < infoText.length; i++)
information_paragraph.innerHTML += "<br/>"+infoText[i];

<div id="myDivElement">
</div>

【讨论】：

</br> 不是有效标签 - 如果您要自行关闭它，您需要将斜线放在另一边 <br/> 但 html 5 根本不需要斜线

@Pete 更正它的错字我会改变它。谢谢

【参考方案3】：

我认为这可行

const  information_paragraph = 
document.getElementById('myDivElement');
let  infoText = "Hello World!"; 
let infoTextLetters ;
for(i in infoText)
  infoTextLetters +=  `
   <br> $infoText[i] ` ;

information_paragraph.innerHTML = infoTextLetters