如何使用 jQuery 在动态创建的文本区域中显示文本？

Question

我正在使用 jQuery 单击按钮创建一个文本区域。我遇到的问题是 textarea 值不显示，但我可以在控制台中看到该值已设置。我怎样才能使它工作并在动态创建的文本区域中显示文本？

$('.createTextButton').click(function() {

  var mailbody = 'Hello, how are you?';


  $('<textarea>').attr({
    id: 'demomailbody',
    class: 'form-control',
    name: 'demomailbody',
    value: mailbody
  }).appendTo('#pf4');


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>
          <span>Body</span>
          </label>
  <p id="pf4"></p>
</div>

<button class="createTextButton">Create</button>

我在 Inspector 中看到的内容 screenshot

Answer 1

value 实际上是一个属性而不是一个属性。使用.val() 设置文本。或者你可以（但不推荐）使用.prop('value', mailbody)

$('.createTextButton').click(function() {
  var mailbody = 'Hello, how are you?';
  $('<textarea>')
    .attr({
      id: 'demomailbody',
      class: 'form-control',
      name: 'demomailbody'
    })
    .val(mailbody)
    .appendTo('#pf4');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>
    <span>Body</span>
  </label>
  <p id="pf4"></p>
</div>

<button class="createTextButton">Create</button>

Answer 2

文本区域不有值属性。

$('.createTextButton').click(function() {

  var mailbody = 'Hello, how are you?';


  $('<textarea>').attr({
    id: 'demomailbody',
    class: 'form-control',
    name: 'demomailbody'
  }).appendTo('#pf4');
  
  $('textarea').text(mailbody).appendTo('#pf4');


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>
          <span>Body</span>
          </label>
  <p id="pf4"></p>
</div>

<button class="createTextButton">Create</button>

Answer 3

$("textarea").html("Your Text");

或

$("textarea").text("Your Text");

你可以使用上面的代码。

jsfiddle.net/cLsd39e1/