javascript - 获取输入值并生成多个文本区域并在那里设置值

Question

我有一个这样的 DOM，当我填写输入字段并单击按钮时，我需要创建一个 textarea 元素并将输入值存储在那里。如果我多次单击创建多个 textarea 和多个 ID，我该怎么做请检查我的代码，必须感谢最佳答案

$('#note').on('click', function(){
 var storedNoteVal = $('#enterVal').val();
 var count_id = 1;
 var noteCov = $('.note_cover');
 $('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea></textarea></div>');
 $(noteCov).find('textarea').val(storedNoteVal);
 $(noteCov).each(function(index, element) {
     $(this).attr('id', 'noteId' + count_id);
     count_id++;
 });
			
});

.full-width.note_cover {
    float: left;
	margin-bottom:15px;
}
.note_cover textarea {
    height: auto !important;
    height: 45px !important;
    resize: none;
    width: 100%;
	/*border:none;*/
}

<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">
            
</div><!-- #content_bag -->

<input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
<button id="note">click me</button>

Answer 1

您的代码运行良好，只需将storedNoteVal 放入text-area，input 将不会生成任何text-区域 如果它是空白的。

$('#note').on('click', function() {
  var storedNoteVal = $('#enterVal').val();
  var count_id = 1;
  var noteCov = $('.note_cover');
  
  if(storedNoteVal){
    $('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea>' + storedNoteVal + '</textarea></div>');
  //$(noteCov).find('textarea').val(storedNoteVal);
  $(noteCov).each(function(index, element) {
    $(this).attr('id', 'noteId' + count_id);
    count_id++;
  });
    
  }

});

.full-width.note_cover {
  float: left;
  margin-bottom: 15px;
}
.note_cover textarea {
  height: auto !important;
  height: 45px !important;
  resize: none;
  width: 100%;
  /*border:none;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">

</div>
<!-- #content_bag -->

<div>
  <input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
  <button id="note">click me</button>
</div>