This is the HTML containing a list of <a> tags containing the date within the .caption2 class. By default the list of these episodes are NOT sorted by date. How can I sort them by date with the oldest being on top of the list and latest at the end of the list?

<div class="pure-u-1 pure-u-sm-3-5">
  <h2 class="separatorbar">All Episodes</h2>
  <a class="episodecell" href="/+R7DU820ug">
    <img
      class="art"
      src="https://example.com/1174581"
    />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">
          489: Very Inappropriate Thoughts About This Computer
        </div>
        <div class="caption2 singleline">Jun 30 • 114 min</div>
      </div>
    </div>
  </a>
  <a class="episodecell" href="/+QCwmMHIhs">
    <img
      class="art"
      src="https://example.com/1051401"
    />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">
          Priest and Joe Illidge on crafting new villain Entropy without any
          rules
        </div>
        <div class="caption2 singleline">Jun 26 • 87 min left</div>
      </div>
    </div>
  </a>
  <a class="episodecell" href="/+QwxKgVw_o">
    <img
      class="art"
      src="https://example.com/1098514"
    />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">Ep. 647: Best Sci Fi Beach Reading</div>
        <div class="caption2 singleline">Jun 27 • 27 min</div>
      </div>
    </div>
  </a>
  <a class="episodecell" href="/+HdT7S_15E">
    <img
      class="art"
      src="https://example.com/488766"
    />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">Filosofía de coyote</div>
        <div class="caption2 singleline">Jun 29 • 25 min</div>
      </div>
    </div>
  </a>
</div>

1

If the HTML you posted is generated from some API, it’s best to sort the data, then create the HTML

However, to sort the <a> in the existing HTML, you can do as follows

Note, since there is no year value for any date, I chose 1972 … doesn’t matter which year you use though, but pick a leap year so Feb 29 is valid

[...document.querySelectorAll(".episodecell")].map(a=>({a,date:new Date(a.querySelector(".caption2").textContent.split("•")[0]+"1972")})).sort(({date:a},{date:b})=>b-a).forEach(({a})=>document.querySelector("h2.separatorbar").insertAdjacentElement('afterend',a))
<div class="pure-u-1 pure-u-sm-3-5">
  <h2 class="separatorbar">All Episodes</h2>
  <a class="episodecell" href="https://stackoverflow.com/+R7DU820ug">
    <img class="art" src="https://example.com/1174581" />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">
          489: Very Inappropriate Thoughts About This Computer
        </div>
        <div class="caption2 singleline">Jun 30 • 114 min</div>
      </div>
    </div>
  </a>
  <a class="episodecell" href="/+QCwmMHIhs">
    <img class="art" src="https://example.com/1051401" />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">
          Priest and Joe Illidge on crafting new villain Entropy without any rules
        </div>
        <div class="caption2 singleline">Jun 26 • 87 min left</div>
      </div>
    </div>
  </a>
  <a class="episodecell" href="/+QwxKgVw_o">
    <img class="art" src="https://example.com/1098514" />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">Ep. 647: Best Sci Fi Beach Reading</div>
        <div class="caption2 singleline">Jun 27 • 27 min</div>
      </div>
    </div>
  </a>
  <a class="episodecell" href="/+HdT7S_15E">
    <img class="art" src="https://example.com/488766" />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">Filosofía de coyote</div>
        <div class="caption2 singleline">Jun 29 • 25 min</div>
      </div>
    </div>
  </a>
</div>

Let’s use the below functions:

Document.querySelectorAll, Element.querySelector, Array.from, Array.sort, Array.reduce, Node.insertBefore, HTMLElement.innerText, Node.parentElement, Date.parse, String.prototype.split, and RegExp.

// get date from element by inner text
const getDate = e => {
  return Date.parse(e.querySelector(".caption2").innerText.split(/s+•s+/)[0]);
};

// find the a elements
Array.from(document.querySelectorAll("a.episodecell"))
// sort by date
  .sort((a, b) => getDate(a) - getDate(b))
// replace node position by reinserting
  .reduce((prev, cur) => cur.parentElement.insertBefore(cur, prev));
<div class="pure-u-1 pure-u-sm-3-5">
  <h2 class="separatorbar">All Episodes</h2>
  <a class="episodecell" href="https://stackoverflow.com/+R7DU820ug">
    <img
      class="art"
      src="https://example.com/1174581"
    />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">
          489: Very Inappropriate Thoughts About This Computer
        </div>
        <div class="caption2 singleline">Jun 30 • 114 min</div>
      </div>
    </div>
  </a>
  <a class="episodecell" href="/+QCwmMHIhs">
    <img
      class="art"
      src="https://example.com/1051401"
    />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">
          Priest and Joe Illidge on crafting new villain Entropy without any
          rules
        </div>
        <div class="caption2 singleline">Jun 26 • 87 min left</div>
      </div>
    </div>
  </a>
  <a class="episodecell" href="/+QwxKgVw_o">
    <img
      class="art"
      src="https://example.com/1098514"
    />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">Ep. 647: Best Sci Fi Beach Reading</div>
        <div class="caption2 singleline">Jun 27 • 27 min</div>
      </div>
    </div>
  </a>
  <a class="episodecell" href="/+HdT7S_15E">
    <img
      class="art"
      src="https://example.com/488766"
    />
    <div class="cellcontent">
      <div class="titlestack">
        <div class="title singleline">Filosofía de coyote</div>
        <div class="caption2 singleline">Jun 29 • 25 min</div>
      </div>
    </div>
  </a>
</div>

1