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();
});

Answer 1

1st 对于 li 使用 .text() 而不是 .val()

2nd 使用:nth-child()选择器来确定您需要的选定li

试试这个代码

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

    var studentDiv = $('#studentInfo').clone(true);
    studentDiv.find('ul > li:nth-child(1)').text(firstname);
    studentDiv.find('ul > li:nth-child(2)').text(lastname);

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

Working Demo