Geek Answers Handbook

Insert HTML using JS

I am just a little puzzled that at the moment I have the following code that works as expected, everything is fine with it. However, I would like to make some minor changes, as I would like the next function to be able to insert html markup inside the ie text itself;

var str = "Let get Future Ready!"; var split = str.split(""); var counter = 0; var SI = setInterval(function() { var typeText = $('.typetext'); typeText.append(split[counter]); counter++ if(counter == str.length){clearInterval(SI)} },100)

So, at the moment, this function takes an array, splits, and then uses the setInterval method, which I repeated along the length of the string. This allows the text to appear as if typed.

As you can see, my initial str value is 'var str = "Let get Future Ready!";'

However, I would like to add a gap to my value str 'var str = "Let get
Future Ready! "

First, is it possible? Secondly, if someone could offer me some advice, I would be grateful, thanks.

+6
source share
3 answers

So you want to break the line in the HTML text that you are inserting?

Insert

 <br />

to an array at the place where you want the text to break. To insert an element into an array, look at the javascript splice () function: http://www.w3schools.com/jsref/jsref_splice.asp

code example:

 var str = "Let get Future Ready!"; var split = str.split(""); var counter = 0; split = split.splice(18, 0, "<br />");
+1
source

My suggestion is to replace the character | to <br> when executing the loop. Have a look here: https://jsfiddle.net/s04zbfcc/

 var str = "Let get|Future Ready!"; var split = str.split(""); var counter = 0; var SI = setInterval(function() { var typeText = $('.typetext'); typeText.append(split[counter] == '|' ? '<br>' : split[counter]); counter++ if(counter == str.length) { clearInterval(SI) } },100)
+6
source

Check out the snippet below. Comment explanation

 var str = "Let get Future Ready!"; var split = str.split(""); var counter = 0; var SI = setInterval(function() { var typeText = $('.typetext'); typeText.append(split[counter]); counter++ if(typeText.text()=="Let get")//check the text and see if it has Let get typeText.append("<br/>");//if yes append br there if(counter == str.length){ clearInterval(SI); } },100) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="typetext"></div>
+1
source

More articles:


All Articles