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.html file 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 #myList element utilizes jQuery's after() and insertAfter() 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.

jQuery 2.0 Development Cookbook

By : Leon Revill

jQuery 2.0 Development Cookbook

By: Leon Revill

Overview of this book

Creating DOM elements

Getting ready

How to do it…

How it works…

There's more…

See also

jQuery 2.0 Development Cookbook

By : Leon Revill

jQuery 2.0 Development Cookbook

By: Leon Revill

Overview of this book

Creating DOM elements

Getting ready

How to do it…

How it works…

There's more…

See also

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access