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

Question

Hi let's assume that I have the following code:

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

So instead of adding the whole string "Hello World!", I was thinking if I can add a char of that string one at a time. How to access the characters of the string and create a for loop to add content in the innerHTML rather than replacing it?

Answer 1

Convert string to array and iterate?

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

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

Answer 2

I think what you want is to use the string as array and append it to the inner html if you ant it all in a sane line remove "</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> 

Answer 3

I think may this work

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

information_paragraph.innerHTML = infoTextLetters