string.repeat tab/whitespace not working in span

Question

I am now trying to add whitespaces for the 'child' table rows with string.repeat, however, in my span elements, it doesn't work though it works in textareas.

This is my HTML:

<span id="first"></span>
<span id="second"></span>
<span id="third"></span>

This is my JS:

$('#first').append('Help');
$('#second').append('   '.repeat(4) + 'Help');
$('#third').append(' '.repeat(4) + 'Help');

Link to jsfiddle with spans:

http://jsfiddle.net/JoshB1997/mbzjedxr/

Link to same code but textareas except of spans:

http://jsfiddle.net/JoshB1997/mbzjedxr/1/

Why doesn't it work on spans and is there any way to make it work?

Answer 1

Multiple spaces in HTML are shown as a single space. See Why do multiple spaces in an HTML file show up as single spaces in the browser?.

To add multiple spaces in DOM use   entity.

$('#second').append(' '.repeat(4) + 'Help');

Updated Fiddle