Dynamically add to value of textarea

Dynamically add to value of textarea

http://jsbin.com/IKik/1/edit
So I'm trying to dynamically generate/append html tags into a textarea. As
soon as the value is changed I can no longer dynamically generate html to
the element. I can still type (obviously) but the generation process is
invalid. Even though I got no errors.
I made a sample to show the problem I'm getting. Any help/advise on how to
fix this would be greatly appreciated.
HTML
<div id="contain" align="center">
<button id="add1">Add 1</button>
<button id="add2">Add 2</button>
<button id="add3">Add 3</button>
<button id="add4">Add 4</button>
<textarea id="textbox">Default text</textarea>
</div>
CSS
#textbox {
width: 100%;
min-height:30em;
max-height: 100%;
padding: 0px;
resize: none;}
#contain {
width: 100%;
height: 100%;
resize: none;}
JavaScript
$('#add1').click(Add1);
$('#add2').click(Add2);
$('#add3').click(Add3);
$('#add4').click(Add4);
var textbox = $("#textbox");
// Dynamic Add
function Add1() {
textbox.val("Add 1");}
function Add2() {
textbox.append("&lt;div class='gendiv'&gt;gendiv&lt;/div&gt;");}
function Add3() {
textbox.html("<a href='http://bing.com/'>Bing</a>");}
function Add4() {
textbox.text("&lt;img
src='http://farm5.static.flickr.com/4111/5208943327_ec7203ac0e.jpg'&gt;");}