使用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/