从textarea获取值并用文本创建一个新的textarea

Question

现在我有一个获取值的问题〜我正在做一个函数，当我点击一个按钮时，它将显示一个模式，并且里面有一个textarea。一旦你写完所有的内容，点击确定按钮，它会创建一个新的文本区域和你写的文本。你可以做多次。我只知道如何添加一个新的textarea，但我不知道如何获得价值。我很难用这个函数〜希望任何人都可以帮助我。我是这方面的新手。对不起，我的语法错误。

**的Html

$(document).ready(function(){ 
 
\t 
 
var counter=1; 
 

 
$('.add').click(function() { 
 
\t 
 
\t 
 
$('.block:last').before('<div class="block">'+ 
 
'<textarea></textarea>'+ 
 
'</div>'); 
 
\t 
 
counter++; 
 
}); 
 

 

 
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="block"> 
 
<button type="button" class="btn btn-default btn-lg start-new-post-button-setting" data-toggle="modal" data-target="#codetextarea">Add code textarea</button> 
 
<div class="modal fade" id="codetextarea" role="dialog"> 
 
<div class="modal-dialog"> 
 
<div class="modal-content"> 
 
<div class="modal-body"> 
 
<textarea class=" textarea-setting" name="message" id="area"></textarea> 
 
</div> 
 
<div class="modal-footer"> 
 
<span class="add"><button type="button" class="btn btn-default" data-dismiss="modal">OK</button></span> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</div>

**

Answer 1

'<textarea>'+$("#area").val()+'</textarea>'+

这是你如何让textarea的价值。将'<textarea></textarea>'+替换为以上

Answer 2

您需要使用$('#area').val()从textarea获得价值，并附加html或generate dom elements using jQuery。

$(document).ready(function() { 
 
    var counter = 1; 
 
    $('.add').click(function() { 
 
    $('.block:last').before(
 
     $('<div/>', { 
 
     class: 'block', 
 
     html: $('<textarea/>', { 
 
      text: $('#area').val() 
 
     }) 
 
     }) 
 
    ); 
 

 
    /* or by appending */ 
 
    // $('.block:last').before('<div class="block">' + 
 
    // '<textarea>' + $('#area').val() + '</textarea>' + 
 
    // '</div>'); 
 
    counter++; 
 
    }); 
 
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="block"> 
 
    <button type="button" class="btn btn-default btn-lg start-new-post-button-setting" data-toggle="modal" data-target="#codetextarea">Add code textarea</button> 
 
    <div class="modal fade" id="codetextarea" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
     <div class="modal-body"> 
 
      <textarea class=" textarea-setting" name="message" id="area"></textarea> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <span class="add"><button type="button" class="btn btn-default" data-dismiss="modal">OK</button></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>