So let's break this down a little.
- I create the div, and add a class to it.
- I begin an append of the content
- I then take the output from a map, and turn it into a jQuery object for the append (Yes, this is important)
- I use the data I've been given and split it by a new line character and use that array as the input to a jQuery map operation
- Please note that I used the quote form of split, not the regex form. IE7 also removes empty array items when using the regex version.
- For each item from the split, I return an array. The first is a span that includes the text we need, plus a new line, to maintain the text representation of the data. The second is a <br/> to take place of the newline in the html
- Last, I return the DOM elements of the span and br. This is important, since that's what the jQuery constructor back in step 3 expects. Also, I must ask for element 0 since otherwise, I'll get an array instead of an element back from .get().
The best part of this whole thing, is that if I do a .text() on the div, I get exactly the text I need for the editable textarea. Perfect! Well, not exactly. This may have issues with spaces being insignificant, but in our case, that's acceptable for now.