从服务器收到的jQuery数据不使用append（）保留原始格式

Question

我正在从服务器接收数据并将其显示给用户。我最初使用socket.on('disconnect' , function(){ }) 显示数据，并且所有格式均正确（换行符，制表符等）。

html：

textarea

js：

<textarea id="textArea" class="textArea" readonly></textarea>

上面的方法工作正常，但是，现在我想将我的//data stream received from server ... data = xhr.responseText; $( ".textArea" ).val( data ); 切换为textarea（以添加样式并以后可以打印div ...），但是在切换之后当我使用append时，我从服务器收到的所有格式都消失了，所有数据都显示在一个完整的blob中：

html：

div

js：

<div id="textArea" class="textArea"></div>

在将数据附加到//data stream received from server ... data = xhr.responseText; $(".textArea").append(data); 时如何保持源格式？

Answer 1

您真正要寻找的是一种使div像textarea的行为，因为textarea会以固定宽度的字体呈现文本并记住空白。 / p>

.textarea {
    border: 1px solid gray;
    font-family: monospace;
    height: 200px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
    white-space: pre;
}

https://jsfiddle.net/AnonymousSB/hkfy14es/

注意：与textarea不同，您必须将文本的第一行与开头的div元素保持在同一行上，以防止在顶部出现空白，因为white-space: pre;它会呈现所有空白。