Einfügen von HTML mit JS

Question

Ich bin nur ein bisschen ratlos über etwas im Moment habe ich den folgenden Code, der wie erwartet funktioniert, alles ist in Ordnung. Ich möchte jedoch einige kleinere Änderungen vornehmen, da ich möchte, dass die folgende Funktion in der Lage ist, HTML-Markup in den Text selbst einzufügen, d.

var str = "Let's 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) 

im Moment also, nimmt diese Funktion ein Array, Split und dann die setInterval Methode I über die Stringlänge wiederholt haben. Dadurch kann der Text wie getippt aussehen.

Wie Sie sehen können, ist mein Anfangswert von str 'var str = "Lassen Sie uns Future Ready!";'

Allerdings würde Ich mag eine Pause mein str Wert hinzufügen ‚var str =‚Die
Zukunft Bereit Lassen Sie bekommen!‘‘

Zunächst ist es möglich? Zweitens, wenn mir jemand einen Rat geben könnte, wäre ich dankbar, danke.

Answer 1

Sie wollen also einen Zeilenumbruch in den HTML-Text einfügen?

Legen Sie eine

<br /> 

in das Array an der Stelle, wo sich der Text ein Element in ein Array Look break.For Einfügen an der splice() Funktion von javascript: http://www.w3schools.com/jsref/jsref_splice.asp

Beispiel mit Ihrem Code:

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

Answer 2

Mein Vorschlag ist, den | Charakter mitersetzen, wenn die Schleife ausgeführt wird. Check it out hier: https://jsfiddle.net/s04zbfcc/

var str = "Let's 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) 

Answer 3

Überprüfen Sie den folgenden Code-Schnipsel. Erklärung in den Kommentaren

var str = "Let's 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's get")//check the text and see if it has Let's 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>