javascript - 为什么 javascript 只换行一次(第一次)？

Question

我有一个 span.value 元素，其中包含 nl2br('lots of text')，我将使用文本区域对其进行编辑，单击按钮后，该文本区域会出现在 span.value 的位置，其中包含当前的文本文本。

涉及代码:

1 valObject = $(this).parent().find('span.value');

2 curVal = valObject.text();

3 $(this).parent().find('span.value').html('<textarea style="width:660px; height:100px;">'+curVal+'</textarea>');

4 sendValue = $(this).parent().find('input, textarea').val();

5 valObject.html(sendValue);

现在，如果我第二次进入编辑模式，所有换行符都会消失。我不想在每次编辑时刷新页面。有什么帮助吗？我只是不明白是什么导致了它的行为方式。如果我第一次进入“编辑模式”，它会换行，按预期显示文本区域中的文本，在离开“编辑模式”后，它仍然按预期在 span.value 元素上显示文本。但一旦我第二次进入“编辑模式”，一切都会崩溃，世界末日。有什么帮助吗？

Answer 1

您正在修改 DOM，就好像它是 HTML 一样。 DOM 不是 HTML。规则不同。一旦浏览器解释了 HTML，HTML 就消失了。它已经成为一个DOM结构。如果您稍后要求浏览器提供 HTML，它会将 DOM 结构转换为 HTML。 此 HTML 不太可能与您的原始 HTML 相同。

这尤其会影响空白。如果一行中有多个空白字符，它们将减少为一个。因此，多个空格、制表符、换行符等将成为一个空白字符。返回给您的 HTML 中也是如此。

如果您要在 DOM 结构和 HTML 之间进行转换，请不要指望 HTML 保持不变。你不能依赖这一点。