使用jQuery提交时添加代码块

Question

http://jsfiddle.net/rfnslyr/xcqa5/

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

现在，当您粘贴HTML代码时，它会在控制台中返回正确的响应，但是像我的示例一样，我希望在“提交”按钮下方的小代码块中显示它。

每次粘贴新代码+新文件名并单击Submit时，第二个块（如第一个块）就会出现在具有新文件名和提取类的第一个块之后。

这是我要复制的代码，并用提交时插入的文件名/类填充：

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

我不确定如何在提交时重复复制并附加此代码结构。

Answer 1

这是经过修改的JSFiddle：

http://jsfiddle.net/xcqa5/1/

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

基本上，您有一个以所需方式构建的隐藏div。 当他们单击“提交”时，您将克隆该隐藏的div，将其内部的值设置为所需的值，然后将该div追加到容器div的末尾。 完成后，将使用show()显示新克隆的div。

jQuery clone()

http://api.jquery.com/clone/

和append()

https://api.jquery.com/append/