Neue Textzeilen innerhalb eines div

Ich habe ein kleines Problem im Zusammenhang mit dem Platzieren eines per Ajax-Aufruf geladenen Textes.

Ich nehme den Inhalt aus einem Textbereich und speichere ihn in meiner Datenbank, und wenn ich den Text in einem div anzeigen möchte, werden die neuen Zeilen nicht berücksichtigt, sodass der gesamte Text fortlaufend ist.

Der folgende Code zeigt ein kleines Beispiel:

$(function() {
    $('.buttonA').click(function() {
        $('.message').html($('textarea[name="mensaje"]').val());
    });
});

.message {
    width:300px;
    height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<textarea name="mensaje" class="new_message_textarea" placeholder="enter message..."></textarea>
<button class="buttonA">Enter</button>
<div class="message"></div>

Wenn Sie Text mit einigen neuen Zeilen eingeben, wird der Text nach dem Klicken auf die Schaltfläche im div angezeigt und es werden keine neuen Zeilen angezeigt.

Wie kann ich das lösen?

Ich denke, ein besserer Weg, dies zu erreichen, ist das Hinzufügen

white-space: pre

oder

white-space: pre-wrap

Stil zu Ihrem div.

Siehe: HTML – Newline-Zeichen in DIV-Inhalt bearbeitbar?

Fügen Sie dies dem CSS hinzu:

white-space: pre-line

Newline-Zeichen haben keine Auswirkung auf das HTML-Rendering. Ändern Sie dies in Ihrem js:

$('.message').html($('textarea[name="mensaje"]').val());

… dazu:

$('.message').html($('textarea[name="mensaje"]').val().replace(/\n/g, "<br />"));

…und es ersetzt Ihre Zeilenumbrüche durch einen korrekten HTML-Zeilenumbruch