用 JS 插入 HTML

Question

目前我只是对某些事情感到有点困惑，我有以下代码可以按预期工作，一切都很好。但是我想做一些小改动，因为我希望以下函数能够在文本本身中插入 html 标记，即；

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)

所以目前，这个函数接受一个数组，拆分，然后使用我迭代字符串长度的 setInterval 方法。这允许文本看起来像是正在键入。

如你所见，我的 str 初始值为 'var str = "Let's get Future Ready!";'

但是我想为我的 str 值添加一个中断 'var str = "Let's get
Future Ready!"'

首先可能吗？其次，如果有人能给我一些建议，我将不胜感激，谢谢。

Answer 1

所以您想要在插入的 HTML- 文本中换行？

插入一个

<br />

将文本插入到数组中 break.For 将元素插入数组查看 javascript 的 splice() 函数： http://www.w3schools.com/jsref/jsref_splice.asp

您的代码示例：

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

Answer 2

我的建议是在循环时用<br>替换|字符。在这里查看：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

检查以下代码段。 在评论中解释

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>

用 JS 插入 HTML

Inserting HTML with JS

html

javascript

insert

setinterval