javascript - 动态添加到 textarea 的值

Question

http://jsbin.com/IKik/1/edit

所以我试图动态生成/附加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>

CSS

#textbox {
  width: 100%;
  min-height:30em;
  max-height: 100%;
  padding: 0px;
  resize: none;}

#contain {
  width: 100%;
  height: 100%;
  resize: none;}

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

Answer 1

.append(),.html()并且.text()方法不适用于表单元素，.val()应使用设置/获取来自元素方法的值来代替：

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

Answer 2

采用

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

而不是 .val("Add 1")

http://jsfiddle.net/Y4HCr/