Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> difference between 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>
</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>
When you click the Add button, Add two input boxes to the page dynamically and assign values to the two newly added input boxes. IE 6, 7, 8, 9 (compatible mode) runs normally, see the following:
But in FF, Chrome, and IE9 (incompatible mode), it is incorrect:
Change the add () method
Copy codeThe Code is 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 method is to add values to the dom tree first, and then add values to the dom tree. The second method is to add values to the dom tree first, and then find the corresponding processing values. I am a newbie in front-end technology,Personal Understanding:The first method is similar to "pass by value". When var liTemplate = $ ("# template" returns (), the returned html code is, or the html code before initial processing (a bit of passing by value, using a copy, no matter how it is processed, does not affect the meaning of the original value); and the second writing method, when the element is first added to the dom tree and then found from the dom, it is equivalent to the pointer reference of the obtained object, making any changes to the object pointed to by the "Pointer, will directly affect the object itself (a little in the sense of "reference transfer)