如何将文本从文本框附加到 div？答案

【问题标题】：How do I append text from a textbox to a div?如何将文本从文本框附加到 div？
【发布时间】：2014-11-05 22:12:18
【问题描述】：

我怎样才能将这个textarea 数据放入div 中？我试过 .append() 和 .val() 和 .text() 但它对我没有帮助。

HTML：

<textarea id="Input" cols="50" rows="5">
    Insert text to be modified here
</textarea>
<div id="txt"></div>
<p><button id="append">Append</button></p>

jQuery:

$( "#append" ).click( function() {
    ( "#txt" ).append( function() {
        ( "Input" ).val();
    });
});

【问题讨论】：

不要太担心 DIV。查看如何使用 INNERHTML。这可能更像你想要的。
啊！我记得那个东西！我尝试使用 jQuery，因为写出所有这些东西很无聊，但我会尝试的！谢谢:)
我没有否决你的问题，但我有一种感觉，如果没有咆哮，它实际上不会收到任何... ;)
如果你愿意，你仍然可以使用 jquery。只需填充 INNER HTML 标记的内容。
您传递给.append() 的函数会获取该值，但它不会返回它。此外，您在Input 之前缺少#。

标签： javascript jquery html textbox append

【解决方案1】：

.append() 用于将新的 HTML 元素附加到 DOM，而不是用于连接文本。使用.text() 设置DIV 的文本，使用+ 运算符连接字符串。

$( "#append" ).click( function() {
    $( "#txt" ).text( function(i, oldtext) {
        return oldtext + $("#Input").val();
    });
});

DEMO

实际上，您的代码在修复了一些语法错误后可以正常工作。您在某些选择器之前缺少$，在Input ID 之前缺少#，并且您传递给.append() 的函数没有return 语句。修复这些，这行得通：

$( "#append" ).click( function() {
    $( "#txt" ).append( function() {
       return '<br>' + $( "#Input" ).val();
    });
});

DEMO

【讨论】：

如果我做$('#txt').append($('#Input').val());，然后查看txt 的innerHTML，它显示了一个未包含在标签中的字符串（例如span）。根据api.jquery.com/append，append() 的内容可以是“HTML 字符串”，我认为它不一定需要 HTML 标记。我还没有检查是否需要normalize() 来删除空文本节点，但append 在这种情况下使用看起来确实安全。但是，您是专家！如果您建议仅将 append 用于 HTML 元素，我将在我自己的代码中这样做。
你是对的，它确实是这样工作的。他的代码中有一些更简单的错误导致其无法正常工作。

【解决方案2】：

您可以为此使用.text()：

$("#append").click(function() {
    $("#txt").text($("#Input").val());
});

Fiddle.

更新。多个追加：

$("#append").click(function() {
    $("#txt").text($("#txt").text() + " " + $("#Input").val());
});

Fiddle.

【讨论】：

这会替换 DIV 的文本内容，而不是附加到它。
@Regent 一个人通常会感谢另一个人帮助他们...... ;)
@Barmar 在多次阅读问题后，仍然不清楚 OP 是想简单地将 textarea 值添加到 div 还是真的多次附加它。让 OP 有机会澄清哪种方式是正确的。
我认为会进行多次追加以保留记录的历史记录：)