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;

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

1 个答案: