如何使用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>

我在检查器中看到的内容 screenshot

Answer 1

文本区域不没有值属性。

$('.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 2

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 3

$（“ textarea”）。html（“您的文本”）;

OR

$（“ textarea”）。text（“您的文本”）;

您可以使用上面的代码。

jsfiddle.net/cLsd39e1 /