How to Use end () in jQuery

On the official API, the end () method is described as follows: "back to the latest" destructive "operation. That is, the list of matched elements is changed to the previous state .";
It seems that the previous element of the last operation is located, in the following example:
Html code:
Copy codeThe Code is as follows:
<Div> test content 1 </div>
<Div> test content 2 </div>

JQuery code:
Copy codeThe Code is as follows:
$ ('<P> new content </p>'). appendTo ('div '). addClass ('c1'). end (). addClass ('c2 ');

The result is:
Copy codeThe Code is as follows:
<Div> test content 1 <p class = "c1 c2"> new content </p> </div>
<Div> test content 2 <p class = "c1"> new content </p> </div>

Here I don't quite understand how the first <p> label has two styles and what is returned after the end () method. I added monitoring in Firefox and got the following results:
1. $ ('<p> add content </p> '). appendTo ('div ') returns an array of [p, p] objects, that is, the two newly added p tags;
2. $ ('<p> add content </p> '). appendTo ('div '). addClass ('c1 ') returns: [p. c1, p. c1] object array, that is, the p object array after the c1 class style is added;
3. $ ('<p> add content </p> '). appendTo ('div '). addClass ('c1 '). end () Returns [p. c1], which is the <p> of the 1st <div>, and the <p> in the 2nd <div>, therefore, the object of his previous operation is <p> of the 1st <div>, and it is returned;
4. $ ('<p> add content </p> '). appendTo ('div '). addClass ('c1 '). end (). addClass ('c2 ') still returns <p> of the 1st <div>;
Now it is a bit clear, the key is to find out what the last element of the last operation is.