How Do I Make A New Line Or Add Html To This Javascript Function?

I trying to create a typewriter effect, I got everything working, but I cannot figure out how to create a new line. I've tried all three: \n \r but it just types thos

Solution 1:

use \n on the string and the snipplet modified this way

$.fn.Typewriter = function(opts){
var $this = this,
    defaults = { animDelay: 50 },
    settings = $.extend(defaults, opts);
$.each(settings.text, function(i, letter){
    setTimeout(function(){
        $this.html($this.html() + (letter!='\n'?letter:'<br />'));
    }, settings.animDelay * i);
});
}

Solution 2:

<br/> should work fine: http://jsfiddle.net/7WVZX/

[Update] The issue might be that you are adding the characters one by one, instead of adding the line break as a whole. This might work better for you:

$this.html(settings.text.substr(0,i));

The result: http://jsfiddle.net/9Qsku/1/

Solution 3:

Try using .html ...

.html('Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit,');