JavaScript: Jak zmienić string w HTML Element?

Jakiś czas temu stanąłem przed takim problemem: miałem zapisany w string szablon za pomocą HTMLa na przykład:

<div class="foo">
  <h2 class="title">Nagłówek</h2>
  <p>
  Lorem ipsum...
  </p>
</div>

I potrzebowałem przekonwertować stringa na HTML Element. Można to zrobić w taki sposób:

const stringToHtml = (htmlString) => {
    const parent = document.createElement('div');
    parent.innerHTML = htmlString;
    return parent.children.item(0);
};

Ta metoda sprawdza się gdy mamy tylko jeden kontener a w środku reszta danych. Dla tej metody nie zadziała:

<div class="foo">
  Foo
</div>
<div class="bar">
  Bar
</div>

Jak wywołamy funkcję stringToHtml dla takiego szablonu dostaniemy tylko pierwszy element.

Poniżej inna wersja po małej modyfikacji:

const stringToManyHtmlElements = (htmlString) => {
    const parent = document.createElement('div');
    parent.innerHTML = htmlString;
    return parent.children;
};

Jak wywołamy tą funkcję dostaniemy w rezultacie: HTMLCollection. Przykład:

const divs = stringToManyHtmlElements('<div>a</div><div>b</div>');
console.log('Div A: ', divs[0]);
console.log('Div B: ', divs[1]);