官术网_书友最值得收藏!

首頁 >

jQuery 2.0 Development Cookbook

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:

  1. 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>
  2. 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.

See also

  • Inserting content into an element
  • Removing DOM elements
  • Re-using DOM elements
主站蜘蛛池模板： 昭平县| 界首市| 凌源市| 新乡县| 北京市| 师宗县| 合川市| 界首市| 荔浦县| 怀远县| 呼图壁县| 黄冈市| 财经| 丹江口市| 沙雅县| 兴化市| 理塘县| 晋州市| 胶南市| 沙洋县| 哈密市| 临洮县| 乌兰察布市| 桐柏县| 浦北县| 丹寨县| 印江| 收藏| 香河县| 山阴县| 当涂县| 扎兰屯市| 抚松县| 山阴县| 马公市| 陇川县| 类乌齐县| 庆阳市| 辽宁省| 阿图什市| 綦江县|