时间戳

首页 > 解决方案 > 从服务器接收的 jQuery 数据不使用 append() 保持原始格式

javascript - 从服务器接收的 jQuery 数据不使用 append() 保持原始格式

问题描述

我正在从服务器接收数据并将其显示给用户。我最初使用 a 显示数据textarea并且所有格式都是正确的（换行符、制表符...等）。

html:

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

js：

//data stream received from server
...
data = xhr.responseText;
$( ".textArea" ).val( data );

以上工作正常，但是，现在我想切换textarea到 a div（添加样式并能够稍后打印 div ......），但是在我切换后从服务器接收到的所有格式都消失了，所有数据当我使用附加时，显示在整个 blob 中：

html:

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

js：

//data stream received from server
...
data = xhr.responseText;
$(".textArea").append(data);

将数据附加到时如何保持源格式div？

标签： javascriptjqueryhtml

解决方案

您真正要寻找的是一种使 adiv行为类似于 a 的方法textarea，因为 atextarea以固定宽度的字体呈现文本并记住空格。

.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/

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

推荐阅读