JavaScript-如何逐字符显示文本

我正在尝试使用JavaScript逐个字符地显示从数组中提取的文本。我已经设法用阵列的一部分完成了。我找不到一种方法去换行并显示其余的内容

var container = document.getElementById("container");

var notes = [
{scenario: 1, intro: "This is the introduction.", que: "What is the weight of ....?"},
{scenario: 2, intro: "This is the second scen.", que: "What is the second law of ...?"},
{scenario: 3, intro: "This is the third thing.", que: "What is the third law of ...?"},
];


function splTxt(txt) {
    // Split string into characters                                                                                                                                           
    t = txt.split('');
return t
}

function terminal(cl, i) {
// Create a div element and display message                                                                                                                               
var div = document.createElement('div');
div.className = cl;
container.appendChild(div);

// Take the first element of the array                                                                                                                                    
// and extract the intro string                                                                                                                                           
var txt = splTxt(notes[0].intro);
var i = 0;

// Display text, character by character                                                                                                                                   
var display = setInterval(function() {
    div.textContent += txt[i];
    if (i == (txt.length-1)) {
        clearInterval(display);
    }
    i += 1
}, 100);

}

terminal('blueTh', 0);

在它显示了

notes[0].intro

之后，我希望它转到新行并显示

notes[0].que

我已经试过了

var txt = splTxt(notes[0].intro + '<br />' +  notes[0].que);

var txt=splTxt（notes[0].intro+'
'+notes[0].que）；

但显然，它只显示

，并在同一行上打印两条消息。

您有两个选项：

• 插入
  ，并告诉浏览器将其解析为HTML
  您可以通过使用属性而不是
  这将允许您使用诸如
  之类的HTML内容，但当它们应该是纯文本时，您必须转义

  &

  ，
  。如果你不相信文本，就不要这样做

  var container=document.getElementById（“容器”）；
  变量注释=[
  {场景：1，介绍：“这是介绍。”，que：“什么是……的重量？”}，
  {场景：2，简介：“这是第二个场景。”，奎：“什么是……的第二定律？”，
  {场景：3，简介：“这是第三件事。”，奎：“什么是……的第三定律？”
  ];
  功能终端（cl，i）{
  var div=document.createElement（'div'）；
  div.className=cl；
  子容器（div）；
  var txt=[notes[0]。简介，notes[0]。que]。加入（'\n'）。拆分（''；
  var i=0；
  （功能显示（）{
  如果（i'）；
  ++一,；
  设置超时（显示，100）；
  }
  })();
  }
  终端（'blueTh'，0）
  
  message=document.getElementById（“fly”）.innerHTML；//$=走新路线
  距离=150；//像素
  速度=20；//毫秒
  var txt=“”，
  num=0，
  num4=0，
  flyofle=“”，
  flyofwi=“”，
  flyofto=“”，
  fly=document.getElementById（“fly”）；
  函数stfly（）{
  for（i=0；i！=message.length；i++）{
  if（message.charAt（i）！=“$”）
  txt+=''+message.charAt（i）+''；
  其他的
  txt+=“
  ”；
  }
  fly.innerHTML=txt；
  txt=“”；
  flyofle=fly.offsetLeft；
  flyofwi=fly.offsetWidth；
  flyofto=fly.offsetTop；
  fly2b（）；
  }
  函数fly2b（）{
  if（num4！=消息长度）{
  如果（message.charAt（num4）！=“$”）{
  然后var=document.getElementById（“n”+num4）；
  then.style.left=flyofle-then.offsetLeft+flyofwi/2；
  then.style.top=flyofto-then.offsetTop+距离；
  fly3（then.id、parseInt（then.style.left）、parseInt（then.style.left）/5、parseInt（then.style.top）、parseInt（then.style.top）/5）；
  }
  num4++；
  设置超时（“fly2b（）”，速度）；
  }
  }
  功能飞行3（目标、lef2、num2、top2、num3）{
  如果（（数学楼层（top2）！=0和数学楼层（top2）！=-1）| |（数学楼层（lef2）！=0和数学楼层（lef2）！=-1））{
  如果（lef2>=0）
  lef2-=num2；
  其他的
  lef2+=num2*-1；
  如果（数学楼层（lef2）！=-1）{
  document.getElementById（目标）.style.visibility=“可见”；
  document.getElementById（target.style.left=Math.floor（lef2）；
  }否则{
  document.getElementById（目标）.style.visibility=“可见”；
  document.getElementById（target.style.left=Math.floor（lef2+1）；
  }
  如果（lef2>=0）
  top2-=num3
  其他的
  top2+=num3*-1；
  如果（数学楼层（top2）！=-1）
  document.getElementById（target.style.top=Math.floor（top2）；
  其他的
  document.getElementById（target.style.top=Math.floor（top2+1）；
  设置超时（“fly3”（“+target+”、“+lef2+”、“+num2+”、“+top2+”、“+num3+”），25）
  }
  }
  stfly（）
  这是用于演示目的的虚拟文本
  谢谢你，请原谅我的无知，但这不是主要的障碍，因为splTxt分割了字符串，包括br标记，这导致无论使用何种方法，浏览器都会得到
  而不会被渲染，是吗？@Wasteland Yes，如果选择
  innerHTML
  方式，则不应拆分
  
  。我已经包括了一个例子，我现在明白了。非常感谢。