Как вернуть фрагмент документа в виде строки HTML

Я создаю массив элементов HTML.

var elements = [];

Большинство этих элементов добавляются в массив как простые строки HTML, например:

function myHtml() {
    return '<div>Hi there, here\'s some HTML</div>';
}

elements.push(myHtml());

Однако один из этих элементов создается как фрагмент документа, например:

function myFragment() {
    var fragment = document.createDocumentFragment();
    var div = document.createElement('div');
    div.appendChild(document.createTextNode('Hi there, here\'s some HTML');
    fragment.appendChild(div);
    return fragment;
}

elements.push(myFragment());

После создания массива я вставляю все элементы в DOM следующим образом:

function myHtml() {...}
function myFragment() {...}

var elements = [];

elements.push(myHtml(), myFragment());

$('.my-selector').html(elements);

Проблема, конечно, в том, что фрагмент документа так не работает, поэтому он не вставляется в DOM так, как мне нужно. Причина, по которой я не могу просто добавить фрагмент в .my-selector обычным способом, заключается в том, что я генерирую разные массивы на основе разных условий, например:

if (condition1) {
    elements.push(myHtml1(), myHtml2(), myFragment());
else {
    elements.push(myHtml3(), myFragment(), myHtml4());
}

$('.my-selector').html(elements);

Порядок, в котором появляются элементы, имеет значение.

Я нашел массу решений для преобразования строки HTML во фрагмент документа, но не смог преобразовать фрагмент документа в строку HTML, чтобы я мог использовать его таким образом. Является ли это возможным? Есть ли что-то действительно простое, чего мне не хватает?