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

如何将文本从textarea添加到div

3 个答案: