Как добавить несколько элементов массива в качестве содержимого HTML?

Мне нужно извлечь несколько слов из строки текста, вставить каждый символ этих слов в элемент span, а затем заменить извлеченные слова элементами span. Мне удалось преобразовать символы в элементы span, но я не могу понять, как заменить извлеченные слова элементами span без удаления других слов.

<h1 class = "title">Lorem ipsum dolor sit amet</h1>

const title = document.querySelector('.title');

// Extract required words and split them into single character
const firstWord = title.textContent.split(' ').filter(wrd => wrd.startsWith('L')).toString().split('');
const secondWord = title.textContent.split(' ').filter(wrd => wrd.startsWith('a')).toString().split('');

// Return a new array with every character inside a span element
const spanCharacters = arr => {
    return arr.map(char => {
        const span = document.createElement('span');
        span.textContent = char;
        return span;
    });
};

const spanFirstWord = spanCharacters(firstWord);
// return [<span>L</span>, <span>o</span>, <span>r</span>, <span>e</span>, <span>m</span>]

const spanSecondWord = spanCharacters(secondWord);
// return [<span>a</span>, <span>m</span>, <span>e</span>, <span>t</span>]

Теперь, что я хотел бы сделать, это:

<!-- before -->
<h1 class = "title">Lorem ipsum dolor sit amet</h1>

<!-- after -->
<h1 class = "title"><span>L</span><span>o</span><span>r</span><span>e</span><span>m</span> ipsum dolor sit <span>a</span><span>m</span><span>e</span><span>t</span></h1>

Как я могу заменить извлеченные слова сгенерированными промежутками, сохраняя другие слова там, где они есть?