Copy code code as follows:
<! Doctype html>
<html>
<head>
<Title> FF and IE Dynamic Loading Elements </Title>
<script type = "text/javascript" src = "jquery-1.4.min.js"> </script>
<Style Type = "Text/CSS">
li {margin: 0; padding: 0; list-style: none}
</style>
<script type = "text/javascript">
Function add () {
var Litemplate = $ ("#Template");
Litemplate.find ("INPUT [name = 'awbpre']"). Val ("999");
Litemplate.find ("Input [name = 'awbno']"). Val ("12312311");
$ ("#Box"). Append ("<li>" " + Litemplate.html () +" </li> ");
}
</script>
</head>
<body>
<ul ID = "Box">
<li ID = "Template" style = "Display: None">
AWBPRE:
<input type = "text" value = "#awbno#" name = "awbpre"/>
AWBNO:
<input type = "text" value = "#awbno#" name = "awbno"/>
</li>
</ul>
<input type = "Button" value = "add" onClick = "Return add ()"/>/>
</body>
</html>
The code is: When clicking the ADD button, add two input boxes to the page to the page, and assign a value to the two new input boxes at the same time. IE 6,7,8,9 (compatible mode) runs normally. See the screenshot below:
But under FF, Chrome, IE9 (non -compatible mode), it is not right:
Change the add () method to
Copy code code as follows:
<script type = "text/javascript">
Function add () {
var Litemplate = $ ("#Template");
$ ("#BOX"). APPEND ("<li>" + Litemplate.html () + "</li>")
var new_li = $ ("#box li: last");
new_li.find ("Input [name = 'awbpre']"). Val ("999");
new_li.find ("Input [name = 'awbno']"). Val ("12312311");
}
</script>
That's right. The difference between the two is: the first is to do the assignment first, and then add it to the DOM tree; the second way is to add it to the DOM tree first, and then find the corresponding processing assignment. I am a rookie for front -end technology. Personal understanding: The first way of writing is similar to "Passing by value", Var Litemplate = $ ("#Template"); Later, no matter where to deal with the elements in Litemplate, because Litemplate has not joined the number When the DOM tree is finally called when the livemplate.html () is called, the returned HTML code is still the HTML code before the initial processing (a bit of the value, the copy is used, no matter what the process is processed, it does not affect the original value); it does not affect the original value); And the second way of writing, first add to the DOM tree, and then find the element from the DOM. At this time, the pointer reference of the object obtained. Any modification of the "pointer" direction will directly affect the object itself itself (The meaning of "reference transmission" is a bit)