Differences between javascript: FF/chrome and IE dynamic loading Elements

When writing a piece of js code today, I found that there are some differences between IE and FF when loading HTML elements dynamically.Code:

 
<! Doctype 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
 

 
<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>
 
 
By the way, the difference between the two is that the first method is to add values to the DOM tree first, and the second method is to add values to the DOM tree first, and then find the corresponding processing value assignment. I am a newbie in front-end technology. I personally understand that the first method is similar to "pass by value". When var litemplate = $ ("# template" Transfer (), 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)