Copy Code code as follows:
<!doctype html>
The difference between <title>ff and IE dynamic loading elements </title>
<script type= "Text/javascript" src= "Jquery-1.4.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>
<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>
The code meant: When you click the Add button, dynamically add two input boxes to the page and assign values to the two new input boxes. IE 6,7,8,9 (compatible mode) under normal operation, see the screenshot below:
But in FF,CHROME,IE9 (incompatible mode), it's 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 is:The first is to do assignment processing, and then add to the DOM tree, the second way is to add to the DOM tree, and then find the corresponding processing assignment. I'm a rookie at front-end technology,
Personal Understanding:The first type is similar to "pass by value", var litemplate = $ ("#template"), and then whatever happens to the elements in Litemplate, because Litemplate has not been added to the DOM tree, the final call to Litemplate.html (), the HTML code returned, or the HTML code that was first processed (a bit by value, using a copy, regardless of how it is handled, does not affect the original value of the meaning), and the second way of writing, first to add to the DOM tree, and then find the element from the DOM, when the equivalent of the resulting object pointer reference, the Any modification of the object that the pointer points to will directly affect the object itself (somewhat as a "reference pass")
