How to add a new line to HTML text using JavaScript?

Question

I am using this code which essentially types text onto the screen. I am unsure how to add a new line to the string which is being displayed.

I have already tried \n for those posting their answers. This does NOT work. A new line is not started in my HTML

Code:

var myString = "public class MyResume implements Resume{" +
    /*this is where I want the new line*/ "...." ;

var myArray = myString.split("");
var loopTimer;
function frameLooper() {
  if(myArray.length > 0) {
    document.getElementById("myTypingText").innerHTML += myArray.shift();
  } else {
    clearTimeout(loopTimer); 
    return false;
  }
  loopTimer = setTimeout('frameLooper()',70);
}
frameLooper();

<div id="myTypingText"></div>

var myString = 'public class MyResume implements Resume{\n'+ — David R
– David R, Commented Aug 30, 2016 at 2:22
I tried that already. It doesn't start a new line, but the '\n' does not appear in the text — nilay neeranjun
– nilay neeranjun, Commented Aug 30, 2016 at 2:23

Sharen.Z · Accepted Answer · 2016-08-30 02:28:52Z

4

You can also use  .Just like"your string. new line"

answered Aug 30, 2016 at 2:28

Sharen.Z

411 bronze badge

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

1 Comment

nilay neeranjun Over a year ago

This doesn't work either. The HTML isn't being recognized. It just displays " " on the screen

Gordon Merryweather · Accepted Answer · 2016-08-30 02:48:30Z

Here's an overly simplistic approach with full code. Use a tilde ~ and then watch for it in your frameLooper to insert a
like this:

<html>
<body>
<div id="myTypingText"></div>
<script>
var myString = 'public class MyResume implements Resume{~....' ;

var myArray = myString.split("");
var loopTimer;
function frameLooper() {
if(myArray.length > 0) {
    var char = myArray.shift();
        if (char === '~')
    { document.getElementById("myTypingText").innerHTML += '<br/>'; }
    else
    { document.getElementById("myTypingText").innerHTML += char; }
} else {
    clearTimeout(loopTimer); 
            return false;
}
loopTimer = setTimeout('frameLooper()',70);
}
frameLooper();
</script>
</body>
</html>

Polyov · Accepted Answer · 2016-08-30 02:42:23Z

2

Simply adding   to myString doesn't work because you're inserting each character at one time. When a character gets added with innerHTML, JavaScript encodes it:

$('element').innerHTML += "<";
> "string&lt;"

If you did this for each character in  , you'd end up with

>"string&lt;br&lt;"

You need some way to tell your script to add the entire element when you reach a "break character". You could use an uncommon character like a pipe | or you could add a method which looks ahead to make sure that the next few characters don't spell out  .

edited Aug 30, 2016 at 2:42

answered Aug 30, 2016 at 2:37

Polyov

2,3293 gold badges26 silver badges36 bronze badges

3 Comments

nilay neeranjun Over a year ago

Yeah, that makes a lot of sense. Thanks. Since it's splitting each character into an array, how would I be able to find the break statement? Or is there an easier way of doing this?

Polyov Over a year ago

Use an uncommon character or teach your script to look ahead.

nilay neeranjun Over a year ago

Can I add the uncommon character and then split the string based on that character. Then I could individually split each substring within its own characters?

davidhu · Accepted Answer · 2016-08-30 02:23:47Z

1

To add string to a new line, you need the \n in your string. For example:

var string = 'This is the first line \nThis is the second line'

console.log(string)

This would output

This is the first line 
This is the second line

answered Aug 30, 2016 at 2:23

davidhu

10.6k7 gold badges37 silver badges58 bronze badges

2 Comments

nilay neeranjun Over a year ago

Nope, doesn't work. It doesn't start a new line, but the '\n' does not appear in the text

nilay neeranjun Over a year ago

I know how to start a new line, its just that it isn't working in my HTML

dangsonbk · Accepted Answer · 2016-08-30 02:49:28Z

0

Why don't you just append ul>li or p to your text, something like this:

document.getElementById("myTypingText").innerHTML += "<p>" + myArray.shift() "</p>";

or

document.getElementById("myTypingText").innerHTML += "<li>" + myArray.shift() "</li>";

with:

<ul id="myTypingText"></ul>

edited Aug 30, 2016 at 2:49

answered Aug 30, 2016 at 2:46

dangsonbk

1032 silver badges10 bronze badges

1 Comment

nilay neeranjun Over a year ago

This just adds each character to a new paragraph lol. I want to format the string to look like an actual java program.

Collectives™ on Stack Overflow

How to add a new line to HTML text using JavaScript?

5 Answers 5

1 Comment

Comments

3 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

3 Comments

2 Comments

1 Comment

Related