Line break in a function

Question

I have a Javascript function that shows a text in an element with a "typewriter" effect, but I wanted to make this text come within a P tag (for line breaking). Could someone help me? Thanks in advance.

function EE(texto,ClassElemento,tempo){
var char = texto.split('').reverse();
var typer = setInterval(function () {
    if (!char.length) return clearInterval(typer);
    var next = char.pop();
    document.querySelector(ClassElemento).innerHTML += next;
}, tempo);
}

Answer 1

In fact the <p> is for paragraphs, the <br>would be for line breaks. But anyway, let’s go to your code:

function EE(texto,ClassElemento,tempo){
var char = texto.split('').reverse();
var typer = setInterval(function () {
    if (!char.length) return clearInterval(typer);
    var next = char.pop();
    document.querySelector(ClassElemento).innerHTML += '<br><p>' + next;
}, tempo);
}

I put it there in the linha 6 the two tags <br><p> where it will break and give a paragraph, but you can analyze what will be best. And another, he’s doing this before printing the character, if he wants the print to be done after the reverse:

document.querySelector(ClassElemento).innerHTML += next + '<br><p>';

Answer 2

A quick way and not by far the best way would be to do it:

function EE(texto,ClassElemento,tempo){
  var char = texto.split('').reverse();
  document.querySelector(ClassElemento).innerHTML = '<p></p>'
  var typer = setInterval(function () {
      if (!char.length) return clearInterval(typer);
      var next = char.pop();
      document.querySelector(ClassElemento).firstChild.innerHTML += next;
  }, tempo);
}

EE('Foo is not bar!', '.foo', 1000)

<div class="foo"></div>