javascript - Element got undefined after append on page -

javascript - Element got undefined after append on page -

i seek on page edit script text ,

my code

jquery ::

$( "#box" ).click(function() { var oldtext = $( "#box" ).text(); $( "#box" ).html('<textarea id="vbox">'+oldtext+'</textarea>'); $(this).attr("id","nbox"); }); $( "#savetxt" ).click(function() { alert($('vbox').val()); $( "#nbox" ).html($('vbox').val()); $("#nbox").attr("id","box"); });

html ::

<div id="box"> sd,afmg dasfgds gdfs ,gd, gmfdsvdgfbhdsfg/dfs sdfgdfs gdfsgkdfg </div> <input id="savetxt" type="button" value="save" />

this jsfiddle http://jsfiddle.net/bqgpa/12/ check it

when seek text textearea returns undefined

$( document ).on('click', "#savetxt", function() { alert($('#vbox').val()); $( "#nbox" ).html($('#vbox').val()); $("#nbox").attr("id","box"); });

working jsfiddle demo

and not lose styling change:

var oldtext = $( "#box" ).text();

to:

var oldtext = $( "#box" ).html();

working jsfiddle demo

javascript jquery