modifying a view tree using jQuery - html

Question

I have a text box and a button, i'm trying to figure some messaging functionality using a jQuery tutorial but having trouble finding a good direction. i want the input from the text box to appear in a DIV underneath the DIV containing "Sent messages appear here". testing using www.htmledit.squarefree.com to test the code out below and using F12 (dev mode) i can see the HTML tree
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<div>
<p>
<input type = "text"
id = "textfield" />
<button type ="button" id="btn">Add Message </button>
</p>
<Script>
$( "#btn" ).click(function() {
var message = $.trim($("#textfield").val())
$("#sent").append(message);
$("#sent").append("<br />");
});
</Script>
</div>
<div id="sent" style="font-style: italic">
<div>Sent messages appear here.</div>
</div>
The appended message if i type "U" in the textfield output fine on the bottom screen BUT the html tree does not have DIV tags. the following methods seem helpful but the references about them are a bit confusing. .html(), .text(), .append(), and $("html") functions
the tree should look like this in the element console.

Answer 1

I think that you append the text. The message doesn't wrap with 'div tag.
so to do this, It's very easy.
$("#sent").append('<div>' + message + '</div>');
$("#sent").append("<br />");
append function. It's append the element into the target.
you should add the html tag to append the message
html function. It's to get the children html element of the target.
text function. It's to get the all text for the target.
if you call text function, you only get the string without any html element.
It's a difference with html.
Html is get children html element.