как сохранить несколько пробелов при добавлении

Question

let a = "<div class='child'>lorem       ipsum</div>";
$('#parent').append(a);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='parent'>
<div class='child'>lorem ipsum</div>
</div>

Как видно из yoy, добавлено a, но без нескольких пробелов.

Как сохранить исходное количество пробелов?

Answer 1

Вы также можете использовать элемент textarea и удалить все стили по умолчанию, например:

let a = "<div class='child'><textarea>lorem       ipsum</textarea></div>";
$('#parent').append(a);

.child{
  cursor: text;
}
textarea{
  border: 0;
  pointer-events: none;
  border: none;
  overflow: auto;
  outline: none;
  box-shadow: none;
  resize: none;
  font-size: 16px;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='parent'>
<div class='child'>lorem ipsum</div>
</div>

Answer 2

Один из способов - поместить содержимое в тег pre, CSS которого настроен на наследование стиля font от его родителя:

let a = "lorem       ipsum

"; $ ('# parent'). Append (a);

#parent pre {
  font: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='parent'>
<div class='child'>lorem ipsum</div>
</div>

В качестве альтернативы вы можете использовать непробелы в строке:

let a = "<div class='child'>lorem&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ipsum</div>";

Answer 3

использовать HTML неразрывный пробел  

let a = "<div class='child'>lorem &nbsp;&nbsp;&nbsp; ipsum</div>";

Answer 4

Использование  

let a = "<div class='child'>lorem &nbsp;&nbsp;&nbsp;&nbsp;ipsum</div>";
$('#parent').append(a);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='parent'>
  <div class='child'>lorem ipsum</div>
</div>