Question

所以我试图动态生成/追加html标签到textarea。一旦值改变，我就不能再为元素动态生成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("&lt;div class='gendiv'&gt;gendiv&lt;/div&gt;");}

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()方法不适用于表单元素，因为设置/获取from元素.val()方法的值应该使用：

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

Answer 2

使用

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

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

http://jsfiddle.net/Y4HCr/

动态添加textarea的值

2 个答案: