Creating DOM elements
To create rich and interactive user interfaces, we need to be able to dynamically add DOM elements to a web page. Elements may need to be added to a web page based on user interaction or another event such as page load.
Getting ready
For this recipe, you are going to need another blank HTML file. Create a new HTML file named recipe-3.html within the same directory as the one used for the previous recipe's files.
How to do it…
Learn how to create DOM elements with jQuery by performing the following steps:
- Add the following HTML code to your
recipe-3.htmlfile in order to create a basic HTML page with an unordered list and include the jQuery library:<!DOCTYPE html> <html> <head> <title>Creating DOM elements</title> <script src="jquery.min.js"></script> <script></script> </head> <body> <div id="container"> <ul id="myList"> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> </div> </body> </html> - Add the following JavaScript within the script tags in the head of the HTML document. The following JavaScript code will add two buttons to the DOM after the
#myListelement utilizes jQuery'safter()andinsertAfter()functions:$(function(){ $('#myList').after("<button>Button 1</button>"); $('<button>Button 2</button>').insertAfter("#myList"); });
How it works…
To dynamically add DOM elements to any part of the document, we can use the append(), addAfter(), after(), addBefore(), and before()functions of jQuery. The functions after() and insertAfter() essentially perform the same action; the difference lies in the order in which the expressions are specified. This is the same for insertBefore() and before().
Based on the HTML file in the How to do it... section, the following JavaScript will add two button elements after the unordered list element:
$(function(){
$('#myList').after("<button>Button 1</button>");
$('<button>Button 2</button>').insertAfter("#myList");
});Once the preceding JavaScript has been executed, the HTML rendered in the browser should be modified as follows:
<!DOCTYPE html>
<html>
<head>
<title> Creating DOM elements</title>
</head>
<body>
<div id="container">
<ul id="myList">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<button>Button 2</button>
<button>Button 1</button>
</div>
</body>
</html>Note that even though the second button was added last, it is first in the HTML. This is because we have specified that the button should be inserted after the unordered list element. Both .before() and .insertBefore() jQuery methods work exactly in the same way, except that the button elements would be above the unordered list element.
A common requirement of dynamic web pages and web applications is to be able to add new items to a list. This is best achieved using the .append() function:
$(function(){
$('#myList').append("<li>List Item 4</li>");
});This JavaScript will add the new list item with the text List Item 4 to the bottom of the #myList unordered list element. Alternatively, the prepend() function could be used to insert the list item at the top of the list.
There's more…
jQuery provides developers with many ways to add, append, insert, and update elements into the DOM that could not be demonstrated within a single recipe. Ensure that you are aware of the alternatives by reading the jQuery documentation.
See also
- Inserting content into an element
- Removing DOM elements
- Re-using DOM elements
