Javascript：在html中复制div，替换其中的硬编码文本，并附加到另一个div

Question

如何在html中复制div并替换div中的硬编码文本。复制之后，我想将它们附加到另一个div。我有我的代码，但它不适合我。请帮忙。

HTML

<div id="studentInfo" style="border:1px solid black;">
  <ul>
      <li>Raven</li>
      <li>James</li>
  </ul>
</div>
<button id="addBtn">Add Student</button>
<div id="block" style="width: 100px; height: 100px; border:1px solid black;">
  <p style="text-align: center; font-weight: bold;">Achievers</p>
</div>

的Javascript

$('#addBtn').click(function(){
    var firstname = 'Stack';
    var lastname = 'overflow';

    var studentDiv = $('#studentInfo').clone(true);

    var children = studentDiv.children('ul li');
    studentDiv.find(children).val(firstname);
    studentDiv.find(children).val(lastname);

    $('#block').append(studentDiv).html();
});