Arrows can break header

[tabasavr]

Example: https://jsfiddle.net/wgk1jLc0/

Since arrows work by directly replacing innerHTML, it deletes " v" that's inside header's text.

I've discovered this while trying to make the arrow display side-by-side with header text. For that I'd need to use this structure which is not possible since the arrow is added to the end of innerHTML:

<th>
  <div style="display: flex">
    <span>My text</span>
    <!-- ARROW MUST GO HERE -->
  <div>
  <!-- ARROW IS ACTUALLY ADDED HERE -->
</th>

I think both problems can be solved by making arrow go into its own span with a specific class. If there is no such span, it will be added to the end of innerHTML like before.

Something like this:

<th>
  <div style="display: flex">
    <span>My text</span>
    <span class="table-sort-arrow"><!-- ARROW WILL BE ADDED HERE --></span>
  <div>
  <!-- If no span with class "table-sort-arrow" was found, then it will be added here -->
</th>