Add a line break after each element is cloned

Question

$('.footnote').clone().appendTo('#allfootnotes').append('<br>');

I have a bunch of .footnote elements all through the page, at the bottom of the page I want to list all of the footnotes on the page. So each footnote will be cloned to #allfootnotes . I'm trying to place a line break after each .footnote in the #allfootnotes element, so they're not all jumbled together.

How would I apply the line break after each .footnote once it's been cloned to #allfootnotes ?

And is this the best way to do it? In each .footnote there's 2 span tags, one for the title, and one for the footnote content(don't know if that matters or not).

Answer 1

It sounds like you could use CSS to do this

#allfootnotes .footnote {
  margin-bottom: 10px;      
}

Depending on your situation you may need to make .footnote a block level element with display: block;

Answer 2

DEMO

$('.footnote').clone().appendTo('#allfootnotes').after('<br>');

If you use XHTML than it should be <br />

Answer 3

var allFootNotes = $('#allfootnotes');
$('.footnote').each(function(){
     $(this).clone().add('<br/>').appendTo(allFootNotes);
});

If there are as many foot notes as you say cacheing your $('#allfootnotes') will decrease load on the browser.

Hope this helps

Answer 4

$('.footnote').each(function() {
    $(this).clone().add('<br/>').appendTo('#allfootnotes');
});

EDIT Please see roXon's answer. It's way cleaner than iterating over footnotes yourself.