Javascript 在使用jQuery提交时附加代码块

这个小“应用程序”的目标是键入文件名，粘贴到HTML文档中，当您单击“提交”时，提交按钮下方会出现一个小橙色块，说明您输入的文件名以及提取的CSS类和ID

现在，当您粘贴HTML代码时，它会在控制台中返回正确的响应，但我想在submit按钮下面的小代码块中显示它，如我的示例中所示

每次粘贴新代码+新文件名并点击submit时，在第一个块之后会出现第二个块（与第一个块类似），其中包含新文件名和extract类

这是我希望复制的代码，并在提交时插入文件名/类：

<div id="classes">
    <div class="pageTitle">%filename%</div>
    <div class="cssClassesIDs">
        %classes%
    </div>
</div>

%文件名%
%类别%

---

我不知道如何在提交时重复复制和附加此代码结构。

这里是一个修改过的JSFIDLE：

基本上你有一个隐藏的div，它按照你想要的方式构建。当他们单击“提交”时，您可以克隆隐藏的div，将其中的值设置为您需要的值，然后将该div附加到容器div的末尾。完成后，您可以使用

show（）

显示新克隆的div

Jquery

clone（）

和

append（）

可能通过使用clone（）和append（）？和

var codeNameVal = $('input#codeName').val();
var newClone = $('#classes').clone();
$(newClone).find('div.pageTitle').html(codeNameVal);
$(newClone).find('div.cssClassesIDs').html(uniqueNames.join(','));
$('#container').append(newClone);
$(newClone).show();