I. Summary
After using the jquery selector to get the jquery wrapper set, we need to manipulate it. This chapter first explains how to create elements dynamically, and then learn how to manage jquery wrapper sets, such as additions, deletions, slices, and so on.
Two. Foreword
This series of 2, 3, listed above are too many APIs to believe that people look dizzy. However, these foundations must also be said, the foundation should be solid. In fact, for these lists you can skip, and so later when used to look back or check the official API instructions.
This chapter focuses on the functions of dynamically creating elements and manipulating the jquery wrapper set.
Three. Dynamically creating elements
1. Wrong Programming methods
We often use JavaScript to create elements dynamically, and there are many programmers who change the HTML content of a container directly. For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>动态创建对象</title>
<body>
<div id="testDiv">测试图层</div>
<script type="text/javascript">
document.getElementById("testDiv").innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>";
</script>
</body>
In the example above I added a DIV element dynamically on the page by modifying the contents of the Testdiv. But keep in mind that this is the wrong thing to do!
Cause of the error:
(1) Changes the structure of the page when the page is loaded. A "Terminate operation" error occurs in IE6 if the network slows down or the page content is too large. This means "never change the DOM model of a page when the page is loaded."
(2) Add elements using modified HTML content and do not conform to the DOM standard. In the actual work has also encountered the use of this method to modify content, some browsers do not immediately display the added elements, because the different browser display engine is different. But if we use Dom's createelement to create objects, it's almost all in all browsers. But in jquery, if you're passing in a complete HTML string, the interior is also using innerHTML. So it's not completely negative about the use of innerHTML functions.
So from now on, please discard this old knowledge and program using the correct method described below.
2. Create a new element
Here are two ways to create elements correctly.
(1) Creating elements using HTML DOM
What is DOM?
With JavaScript, you can refactor the entire HTML document. You can add, remove, change, or rearrange items on a page.
To change something on a page, JavaScript needs access to all the elements in the HTML document. This portal, along with methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM).
In 1998, the consortium published the first level of the DOM specification. This specification allows you to access and manipulate each individual element in an HTML page.
All browsers implement this standard, so DOM compatibility issues are almost impossible to trace.
The DOM can be used by JavaScript to read, change HTML, XHTML, and XML documents.
The DOM is divided into different parts (core, XML, and HTML) and levels (DOM level 1/2/3):
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
