It doesn't work because when you are using the variable, you have only executed the appendTo once.
The way jQuery generally works, is by chaining commands. A selector/creator selects or creates DOM elements and returns the object, which is acted upon by additional functions using dot notation ., and so on until there are no more functions in the chain and the final object is returned. This can be stored to a variable. You are not storing the functions in a variable, you are storing the result of the functions. In your case, you are appending the new img to the body and the result (the object) is returned and stored in the variable.
When you put that variable in a loop, nothing happens, because it is just a value, not a function.
Your code:
var $daisy = $("<img>") // create an img element and return it
.attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg") // assign the src value, return the img element
.attr("width", "35") // modify the width, return the img element
.attr("alt","Daisy Photo") // add an alt attribute, return the img element
.appendTo("body"); // add the img element to the body, AND RETURN IT, storing in $daisy
So $daisy now contains, in essence: <img src="url" alt="Daisy Photo" style="width: 35">, which has also been added to body. The appendTo is complete at this point.
When you put all of the code in the loop, you create and append it every time.
You could, however, do this:
var $daisy = $("<img>")
.attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg")
.attr("width", "35")
.attr("alt","Daisy Photo");
for (var i = 0; i < 5; i++) {
$daisy.clone().appendTo("body");
}
Note, you do need to use clone() in this case, otherwise jQuery will remove the original img from its DOM location and append it again, resulting in a single img still. Cloning makes a copy to append.
