How to iterate each character of a string in .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?

Possible duplicate of How can I process each letter of text using Javascript? and Appending using native javascript — Pete
– Pete, Commented Mar 19, 2019 at 11:27

user7847084 · Accepted Answer · 2019-03-19 11:28:53Z

4

Convert string to array and iterate?

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

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

answered Mar 19, 2019 at 11:28

user7847084

Sign up to request clarification or add additional context in comments.

2 Comments

user7847084 Over a year ago

@nickzoum there's a plenty of variants to do this, it's one of them

Pete Over a year ago

You don't seem to have fully answered the question: How to access the characters of the string and create a for loop to add content in the innerHTML rather than replacing it

Andam · Accepted Answer · 2019-03-19 12:04:40Z

1

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>

edited Mar 19, 2019 at 12:04

answered Mar 19, 2019 at 11:31

Andam

2,1971 gold badge10 silver badges28 bronze badges

2 Comments

Pete Over a year ago

</br> is not a valid tag - if you were to self close it, you need to put the slash on the other side <br/> but html 5 doesn't need the slash at all

Andam Over a year ago

@Pete Correct its a typo I will change it . Thanks

Akram Elhaddad · Accepted Answer · 2019-03-19 12:24:15Z

0

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

answered Mar 19, 2019 at 12:24

Akram Elhaddad

3145 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to iterate each character of a string in .innerHTML (for-loop)?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related