jQuery 将 HTML 代码附加到 textarea答案

【问题标题】：jQuery append HTML code into textareajQuery 将 HTML 代码附加到 textarea
【发布时间】：2013-07-12 05:43:49
【问题描述】：

我正在尝试将 HTML 元素“附加”到文本区域中。我想出了如何插入 HTML 元素：

看这里-------> jsFiddle

但我不知道如何追加。

这是代码：

HTML

<select id='sel' size='1'>
  <option>&#60;&#62;&#60;&#47;&#62;</option>
  <option>&#60;p&#62;&#60;&#47;p&#62;</option>
  <option>&#60;div&#62;&#60;&#47;p&#62;</option>
  <option>&#60;a&#62;&#60;&#47;a&#62;</option>
  </select><br/><br/>
<textarea id='txtarea'></textarea>

jQuery

$(document).ready(function() {
  $('select').change(function() {
    $('textarea').html($(this).val());        
  });
});

有谁知道如何将 html 元素文本附加到文本区域？我的意思是，如果您继续单击“

”项目，它将继续在另一个之后插入。

谢谢！！

【问题讨论】：

textarea 有一个开始和结束标签，所以 .append() 不应该工作吗？

标签： jquery select append

【解决方案1】：

试试这个

$(document).ready(function() {
    $('select').change(function() {
        var currentVal = $('textarea').val();
        $('textarea').val(currentVal + $(this).val());    
    });
});

DEMO

【讨论】：

【解决方案2】：

在事件处理程序之外创建一个临时变量并继续附加，然后使用变量值更新 textarea，如下所示：

var tempValue = '';

http://jsfiddle.net/KyleMuir/vWFQQ/1/

您将遇到的问题是change() 不会为同一个下拉菜单选择多个选项，但是，这里的解决方案：https://stackoverflow.com/a/898761/2469255 可能有用...

希望对你有帮助

编辑：请参阅 this 更新的小提琴 .selected() 扩展。

【讨论】：

+1 -- 很好的解释。在change() 事件中没有考虑到这一点（尽管有道理）。我还是更喜欢.append() 方法，但这是最好的解决方案！
感谢您的评论，我不知道为什么，但我个人不喜欢混合香草 JS 和 jQuery。我没有令人信服的理由，只是我觉得错了。

【解决方案3】：

我会将.append() 与createtextnode 一起使用：

$('select').change(function() {
    $('#txtarea').append(document.createTextNode($(this).val()));   
})

Updated Fiddle

【讨论】：