html - 如何将文本从 textarea 添加到 div

Question

我尝试获取 textarea 的文本（多行）并将文本设置为 div。但是 div 只有一行来自 textarea 的文本

这是我的代码：

//html structure
<div>

    <textarea id="cmt_content" rows="10" cols="60"></textarea>
    <br> <input id="addAccordion" type="button" value="ADD COMMENT" />
</div>
<div id="rs">
</div>

//script
$('#addAccordion').click(function(){
    var content = document.createElement("div");
    content.appendChild(document.createTextNode($("#cmt_content").val()));
    $('#rs').append(content);
});

非常感谢！

Answer 1

您必须将换行符转换为正确的 HTML<br>标记。

var html = $("#cmt_content").val().replace(/(\n|\r|\r\n)/g, '<br>');

然后只需将其设置为您创建的 div 的 innerHTML：

content.innerHTML = html;

或者您可以将其合并为一行：

content.innerHTML = $("#cmt_content").val().replace(/(\n|\r|\r\n)/g, '<br>');

查看实时示例：http: //jsfiddle.net/samliew/RhHaS/

最终代码：

$('#addAccordion').click(function(){
    var content = document.createElement("div");
    content.innerHTML = $("#cmt_content").val().replace(/(\n|\r|\r\n)/g, '<br>');
    $('#rs').append(content);
});

Answer 2

在您描述作品的场景之后，我想您只是遇到了新行的问题

这是否更好？

$('#addAccordion').click(function(){
    var content = $("<div>");
    content.append($("#cmt_content").val().replace(/(\n|\r|\r\n)/g, '<br />'));
    $('#rs').append(content);
});

http://jsfiddle.net/ZahVy/

Answer 3

尝试这个

$(document).ready(function () {
        $('#addAccordion').click(function () {
            var value = $("#cmt_content").val().replace(/\n/g, '</br>')
            $('#rs').append('<div>' + value+'</div>' );
        });
    });