javascript - 如何将文档片段作为 HTML 字符串返回

Question

我正在创建一个 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 字符串，以便我可以以这种方式使用它。是否可以？是否有一些非常简单的东西是我遗漏的？

Answer 1

将它附加到一个元素并获取元素的 innerHTML

let div=document.createElement("div");
div.appendChild(fragment);
div.innerHTML;