Javascript 动态添加到textarea的值

因此，我试图动态地生成/附加html标记到文本区域。一旦值被更改，我就不能再为元素动态生成html。我仍然可以键入（显然），但生成过程无效。即使我没有犯错误

我做了一个样本来说明我遇到的问题。 如有任何关于如何解决此问题的帮助/建议，将不胜感激

HTML

<div id="contain" align="center">
  <button id="add1">Add 1</button>
  <button id="add2">Add 2</button>
  <button id="add3">Add 3</button>
  <button id="add4">Add 4</button>

  <textarea id="textbox">Default text</textarea>
</div>

JavaScript

$('#add1').click(Add1);
$('#add2').click(Add2);
$('#add3').click(Add3);
$('#add4').click(Add4);

var textbox = $("#textbox");

// Dynamic Add
function Add1() {
  textbox.val("Add 1");}

function Add2() {
  textbox.append("<div class='gendiv'>gendiv</div>");}

function Add3() {
  textbox.html("<a href='http://bing.com/'>Bing</a>");}

function Add4() {
  textbox.text("&lt;img src='http://farm5.static.flickr.com/4111/5208943327_ec7203ac0e.jpg'&gt;");}

$（'add1'）。单击（add1）；
$（#add2'）。单击（add2）；
$（#add3'）。单击（add3）；
$（#add4'）。单击（add4）；
var textbox=$（“#textbox”）；
//动态添加
函数Add1（）{
textbox.val（“添加1”）；}
函数Add2（）{
textbox.append（“div class='gendiv'gendiv/div”）；}
函数Add3（）{
textbox.html（“”；}
函数Add4（）{
textbox.text（“img src=”文本）http://farm5.static.flickr.com/4111/5208943327_ec7203ac0e.jpg'");}

使用

而不是.val（“添加1”）

.append（）

、

.html（）

和

.text（）

方法不适用于表单元素，用于设置/获取来自元素的值。应改用val（）方法：

function add2() {
  textbox.val(function(_, oldVal) {
       return oldVal + "string to be appended";
  });
}

---

非常感谢。我认为应该使用val，但不知道如何让它工作，所以最终尝试了各种方法，结果没有成功。否定文本区域中的文本是.val。你的小提琴做的正是我不想要的，用动态生成的值替换值，而不是将其添加到值中。

function Add1() {
  textbox.text("Add 1");}

function add2() {
  textbox.val(function(_, oldVal) {
       return oldVal + "string to be appended";
  });
}