使用jQuery提交时添加代码块

Question

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

The goal of this little "app", is to type in a filename, paste in an HTML document, and when you click submit, a little orange block below the Submit button appears stating the filename you entered, and the extracted CSS classes and ID's.

Right now it returns the correct response in console when you paste in HTML code, but I want to display it in little code blocks below the submit button like in my example.

Every time you paste in new code + new file name and hit submit, a second block like the first appears after the first block with the new filename and extract classes.

This is the code that I want duplicated + populated with the filename/classes inserted on submit:

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

I'm not sure how to duplicate and append this code structure repeatedly on submit.

Answer 1

Here's a modified 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();

Basically you have a hidden div that's built the way you want it. When they click submit you clone that hidden div, set the values inside to what you need, then append that div to the end of the container div. Once you do that you show your newly cloned div with show() .

Jquery clone()

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

and append()

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