Javascript: Дублируйте div в html, замените текст в твердом скобке внутри и добавьте в другой div

Question

Как я могу дублировать div в html и заменять жесткий код в 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

первый При использовании Li .text() не .val()

Используйте :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

Answer 2

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

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

 
    var children = studentDiv.find('ul li'); 
 
    children.eq(0).html(firstname); 
 
    children.eq(1).html(lastname); 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>