How to make a line break in a string or get a string from html with tags pure JS

I have some code like this that implements the typewriter effect. I take the text from the tag into html and then paste it back with the effect.

The only thing is that <br> tags is not taken into account, and the text is inserted on one line.

How can I get the text along with tags or manually add it from JS?

    var str = document.querySelector('.index-title-main h1').textContent || document.querySelector('.index-title-main h1').innerText,        i = 0,        isTag,        text;    (function type() {        text = str.slice(0, ++i);        if (text === str) return;        document.querySelector('.index-title-main h1').style.display = 'inline';        document.querySelector('.index-title-main h1').innerHTML = text;          var char = text.slice(-1);        if( char === '<' ) isTag = true;        if( char === '>' ) isTag = false;          if (isTag) return type();        setTimeout(type, 80);    }());

body{    width: 100%;    height: 100vh;    background-color: #000;  }  .index-title-main{    color: #fff;    font-size: 25px;    height: 290px;    white-space: pre-wrap;  }

<div class="index-title-main"><h1 style="display: none;">TEXT!<br>TEXT,<br>TEXT </h1></div>

https://stackoverflow.com/questions/66502186/how-to-make-a-line-break-in-a-string-or-get-a-string-from-html-with-tags-pure-js March 06, 2021 at 11:49AM