Turn a text area into an array by line and then append it to a div using Jquery?

Question

I have tried loads of code and have left it commented out in the javascript file. I want to take the contents of a textarea (defined by the user) and turn it into an array. I will then use a for loop to append each element to a new div. All when button1 is clicked.

I have set up a jsfiddle for this

http://jsfiddle.net/34uBW/1/

I have looked at the other posts on here and I think I am missing something do I need to use php? ( never used php before)

Thanks

js looks like this

$(document).ready(function()
{

$('#button').click(function()
{    
     var toAdd = $('input[name=checkListItem]').val();
     var $newdiv = "<div class='draggable'>" + toAdd + "</div>";
     $("#1").append($($newdiv).draggable());


}
);

$('#button1').click(function()
{
   /* //var yes = $('input[name=myname]').val();
    //var yes = $('input[name=myname]').val().split('\n');
   var yes = document.getElementById('textarea').value.split('\n');
   //var yes = $('#textarea')[0].value.split('\n');        
   var $newdiv1 = "<div class='draggable'>" + yes[0] + "</div>";
    $("#1").append($($newdiv1).draggable());
    var lines = $('#textarea').val().split(/\n/);
    var texts = []
    for (var i=0; i < lines.length; i++) {
    // only push this line if it contains a non whitespace character.
    if (/\S/.test(lines[i])) {
    texts.push($.trim(lines[i]));
    }
    }

    alert(JSON.stringify(texts));​*/

}
);





});

Answer 1

Is this what you want?

var lines = $("textarea").val().split(/\n/g);      //Split the lines
for(var i=0; i < lines.length; i++){               //Loop through the Array
    var ele = $("<p>");                            // ├─ Create a node
    ele.html(lines[i]);                            // ├─ Put in the text
    $("#opt").append(ele);                         // └─ Append it
}

http://jsfiddle.net/DerekL/Ge2yF/
http://jsfiddle.net/DerekL/Ge2yF/16

This will split the value of the textarea by \\n (newline) into an Array, then append it in a div .