Как разбить строки на новую строку, которые объявлены в массиве?Javascript / Jquery

Question

Я хотел разбить одну строку в наборе элементов массива.Вывод будет отображаться с интервалом времени.Javascript:

    <script type="text/javascript"> 
    var caption= document.getElementById('caption');
    var text=['Hey there please help me','solve the problem sleep BETTER.'];
                    function display(i){
                    if(i >= text.length){
                       i = 0;
                       }
                    caption.innerHTML = text[i];
                    setTimeout(function(){
                      display(i + 1)
                     }, 6000)

                   }
                   display(0)
     </script>

Вывод: решить проблему сна ЛУЧШЕ.Но мне нужно что-то вроде этого: решить проблему (в новой строке) sleep BETTER.

Html:

<div class= "content" >
h1><span id="caption"> </span></h1> 
</div>

Мне нужно отобразить заголовок с новой строкой.

Спасибо!

Answer 1

Вместо того, чтобы просто перезаписывать текстовое содержимое с помощью caption.innerHTML = text[i], вам нужно добавить к содержимому с помощью +=.Чтобы вывести solve the problem и sleep BETTER на новые строки, сначала нужно разделить их и поместить их в массив, а затем добавить разрыв строки HTML (<br />) перед выводом нового текста:

var caption = document.getElementById('caption');
var text = ['Hey there please help me', 'solve the problem', 'sleep BETTER.'];

function display(i) {
  if (i >= text.length) {
    i = 0;
  }
  caption.innerHTML += "<br />" + text[i];
  setTimeout(function() {
    display(i + 1)
  }, 6000)
}

display(0)

<div class="content">
  <h1><span id="caption"> </span></h1>
</div>

Если вы не хотите повторять, просто установите функциональность внутри оператора if, который проверяет if (i < text.length):

var caption = document.getElementById('caption');
var text = ['Hey there please help me', 'solve the problem', 'sleep BETTER.'];

function display(i) {
  if (i < text.length) {
    caption.innerHTML += "<br />" + text[i];
    setTimeout(function() {
      display(i + 1)
    }, 6000)
  }
}

display(0)

<div class="content">
  <h1><span id="caption"> </span></h1>
</div>