如何在 HTML 的隔断线中显示 output？

Question

How if I want to display a set of output in breaklines in HTML? I have separate and join the result using JS, at console it appear as what I want, but not in div tag.

Console Log

Actual result

HTML

<div class='row'>
    <div class='col-lg-12'>
        <span id='testing'></span>
    </div>
</div>

JS

var names = 'Harry,John,Clark,Peter,Rohn,Alice';
var nameArr = names.replace(/,/g, '\n');
$('#testing').text(nameArr)

Answer 1

You can use .html() instead of .text() and you need to use <br/> tag to break the line

 var names = 'Harry,John,Clark,Peter,Rohn,Alice'; var nameArr = names.replace(/,/g, '<br/>'); $('#testing').html(nameArr);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class='row'> <div class='col-lg-12'> <span id='testing'></span> </div> </div>

Answer 2

Using CSS

white-space: pre

 var names = 'Harry,John,Clark,Peter,Rohn,Alice'; var nameArr = names.replace(/,/g, '\n'); $('#testing').text(nameArr)

 #testing { white-space: pre; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='row'> <div class='col-lg-12'> <span id='testing'></span> </div> </div>

Using <br/>

 var names = 'Harry,John,Clark,Peter,Rohn,Alice'; var nameArr = names.replace(/,/g, '<br/>'); $('#testing').html(nameArr)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='row'> <div class='col-lg-12'> <span id='testing'></span> </div> </div>

Answer 3

try this

var names = 'Harry,John,Clark,Peter,Rohn,Alice';
var nameArr = names.split(',');
$(nameArr).each(function(index, name) {
  $('#testing').append("<p>" +name+ "</p>")
})