Cannot Get Outerhtml/value Of A Dynamically Added Textarea

This fiddle https://jsfiddle.net/xa9m49zy/ demonstrates that you can get the outerHTML (with the text area value) of a textarea that is in the DOM when it renders, but when the tex

Solution 1:

The problem is that you are setting the value of the second textarea using .val(), but outerHTML does not retrieve values, it retrieves an element and the content of that element.

textarea elements get their value from their content.

If you set the content for the second textarea using the .text() method, it works.

alert($("#abc").get(0).outerHTML); //returns everything as expected
$("<textarea id='xyz'></textarea>").text("Test 2").appendTo("body");
alert($("#xyz").get(0).outerHTML); //only shows <textarea></textarea> in non-MS browser

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><textareaid="abc">
  Test
</textarea>