Wrap each element with html using jQuery

Question

<div class="inner">
    line 1
    line 2
    line 3
</div>

$(document).ready(function(){
    $('.inner').wrapInner('<p/>');
});

The current code adds the the <p> tag around all the elements, is it possible to add the <p> to each? like

<p>line 1</p>
<p>line 2</p>
<p>line 3</p>

`@Grundizer`: That doesn't answer the question. In the markup, what makes it clear that a line is a line? Remember that line breaks in HTML are just whitespace, not actual line breaks, except in `pre` elements. — T.J. Crowder, Mar 21 '12 at 12:42
You'll need to separate each line - http://stackoverflow.com/questions/1155678/javascript-string-newline-character and then wrap each one individually... — Lix, Mar 21 '12 at 12:45
I'm trying to create a markup that isnt there...the data is given to me in word format there are no line breaks there — zadubz, Mar 21 '12 at 12:46
You need to Look here http://stackoverflow.com/questions/1726747/jquery-how-do-you-loop-through-each-newline-of-text-typed-inside-a-textarea — Baran, Mar 21 '12 at 12:49

score 2 · Accepted Answer · answered Mar 21 '12 at 12:48

2

go ahead :

var g=$(".inner").html().split(/\n/);

var t= $.map (g,function (a){ if (a!='') return '<p>'+a+'</p>';});

$('.inner').html(t.join(''));

answered Mar 21 '12 at 12:48

Royi Namir

1 Answers1