How could previous element of button is the span?

We have the code:

$(this).prev().show(); in $("button").click(function){}

As 1st assumption, I understand, "this" stands for button. It means $(this).prev().show(); this line of code target the previous element of "button".

However, after we use "append" to add the button. It could be before attribute "span". Here is HTML code:

<p class="spoiler"> <!--Spoiler:--> <span>Luke and Leia are siblings. Ew.</span> </p>

So how It, "span" could be previous element of "button". I understand the opposite way: "button" is previous element of "span".

So why this code works $(this).prev().show();

Or in 2nd assumption, "append" add the "button" element AFTER <span> which is already there.

If It is in this case, I can understand how pre() work.

Could someone give some glues/comments about my thinking.