How to add HTML components dynamically with jQuery
That was day one of trying out jQuery: to add HTML components dynamically. Not a difficult task, but it will be helpful for me to record how to do DOM manipulation in jQuery for future use. As such, this post is created to recollect my experience in adding HTML components dynamically with jQuery.
The jQuery codes to add HTML components when I click on a button
function addMessageToWebPage(msg) {
$messageArea = $('#messageArea');
$messageArea.html('<p>' + msg + '</p>' + $messageArea.html());
}
$(document).ready(
function() {
$('#messageForm').submit(
function(event) {
addMessageToWebPage($('#messageTextField').val());
event.preventDefault();
}
);
}
);
I first define the addMessageToWebPage function which accepts a message as an input parameter. When it is called, it will look for the HTML element with messageArea as its id, enclose the message with a HTML paragraph element, and append the result before messageArea's original HTML contents.
I then set a callback function via $.ready for jQuery to notify my codes when the HTML document is ready for manipulation. When the HTML document is ready, I look for the form with messageForm as its id and attach a callback function via $.submit to listen to form submissions triggered by one of its form elements. Inside the callback function, I look for text entered into the text field with messageTextField as its id and gave the text to the addMessageToWebPage function.
The HTML document to render the controls for adding messages to itself
With the JavaScript codes at hand, I head over to my reference on HTML code segments and construct the following HTML document:
<html>
<head>
<title>Adding HTML components dynamically with jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function addMessageToWebPage(msg) {
$messageArea = $('#messageArea');
$messageArea.html('<p>' + msg + '</p>' + $messageArea.html());
}
$(document).ready(
function() {
$('#messageForm').submit(
function(event) {
addMessageToWebPage($('#messageTextField').val());
event.preventDefault();
}
);
}
);
</script>
</head>
<body>
<form id="messageForm">
<fieldset>
<label for="messageTextField">Message to add:</label>
<input id="messageTextField" name="messageTextField" type="text"/>
</fieldset>
<fieldset>
<input name="submitButton" type="submit" value="submit"/>
</fieldset>
</form>
<h3>Messages added so far:</h3>
<div id="messageArea">
</div>
</body>
</html>
At the head section of the HTML document, I gave it a title and inserted the JavaScript which I had created earlier.
In the body tag, I create a HTML form with messageForm as its id. Inside the form, I included a HTML text field with messageTextField as its id and a submit button for the user to submit the message entered in the HTML text field to my JavaScript codes.
Share
Tweet
Share
Save
