jquery - shouldn't keep textarea data? -

i have textarea inside form:

<form action="#" id="container">   <textarea id="txt" cols="100" rows="5">good bye</textarea> </form> 

all want replace form div:

$("#container").replacewith(function() {     return "<div>" + $(this).html() + "</div>"; }); 

that works without problem, if before use replacewith method change textarea value:

$("#txt").val("hello world"); 

the final content textarea inside div "good bye" text, not "hello world" expected. have demo here.

why happening? how can replace form div preserving textarea contents?

this works:

$("#txt").val("hello world"); $("#container").replacewith(function() {     return $('<div />').append($(this).contents()); }); 

the issue come serializing html .html(). it's better work in terms of dom nodes. this'll preserve event handlers.

---

here's way:

$('#container').wrapinner('<div/>').children().unwrap();