I need to replace 'No' with 'N^o' inside an h1 heading using vanilla javascript. So in a nutshell I would like to find the h1 tag by searching for it's class '.product__title', search the text inside the h1 tag and find every instance of 'No' and then wrap a sup tag around the 'o', like below

N<sup>o</sup>

And example of the heading could be 'Table N^o 04'

This is the code that I have tried, which finds and replaces the word - but I'm unable to insert the sub tag around the 'o', without the browser actually rendering the sub tag as text and not html.

var html = document.querySelector('.product__title');
  var walker = document.createTreeWalker(html, NodeFilter.SHOW_TEXT);
  var node;
  while (node = walker.nextNode()) {
    node.nodeValue = node.nodeValue.replace(/No/, 'N<sup>o</sup>')
  }

Any help would be highly appreciated. The above code is from a tutorial I found searching around, so it's not my original code.