Multiline Content to List Items

How to turn a multiline text area's content into a series of list items using jQuery

by Brian Layman

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<textarea id='source' rows="4" cols="50">
This is the original content. 
Of the text area 
That will be converted
</textarea>

<ul id='target'>
  <li>Here's a default item so that you know where the ul is</li>
</ul>

JavaScript

$(document).ready(function() {
  var data = $('#source').val();
  // $('#target').append($('<li>').text('fred'));
  var lines = data.split(/\r\n|\n|\r/);

  for (var i = 0; i < lines.length; i++) {
    if (lines[i] > '') {
      $('#target').append($('<li>').text(lines[i]));
    }
  }
})