Issues about dynamically creating DOM elements based on jquery_jquery

Copy code The code is as follows:

And you should still enjoy using it, but how many people know that this is Wrong approach! Reason for the error:
(1) The structure of the page is changed when the page is loaded. In IE6, if the network slows down or the page content is too large, a "terminate operation" error will occur. That is to say" "Never change the DOM model of the page when the page is loading".
(2) Using modified HTML content to add elements does not comply with the DOM standard. In actual work, I have also encountered that after using this method to modify the content, some browsers The added element cannot be displayed immediately in the browser, because the display engines of different browsers are different. But if we use Dom's CreateElement to create an object, it can be done in almost all browsers. But in jQuery, if the incoming It is a complete HTML string, and innerHTML is also used internally. Therefore, the use of the innerHTML function is not completely negated. So from now on, please abandon this old knowledge and use the correct programming method introduced below.
About using HTML DOM to create This article does not introduce the elements in detail. Here is a simple example: the first correct way:

Copy the code The code is as follows:

//Create elements using Dom standards
var select = document.createElement("select");
select.options[0] = new Option("Add-in 1", " value1");
select.options[1] = new Option("Add-in2", "value2");
select.size = "2";
var object = testDiv.appendChild(select );

We can create a Dom element by using the document.createElement method, and then add it to the specified object through the appendChild method.
Second way: Use Jquery
when HTML characters Strings are elements without attributes. Document.createElement is used internally to create elements, for example:

//jQuery internally uses document.createElement to create elements:


$(""). css("border","solid 1px #FF0000").html("Dynamicly created div").appendTo(testDiv);
Otherwise, use the innerHTML method to create elements:

//jQuery internal use innerHTML creation element:

$("dynamically created div").appendTo(testDiv)