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);
});