Question

我正在尝试使用模板元素在A-Frame中动态创建新实体。辅助函数如下所示：

function htmlToElement(html) {
    const template = document.createElement('template');

    // Never return a text node of whitespace as the result.
    html = html.trim();

    template.innerHTML = html;
    return template.content.firstChild;
}

我这样用它：

document.querySelector('a-scene').addEventListener('loaded', () => {
  const cube = htmlToElement('<a-box position="0 1 -2"></a-box>')

  document.querySelector('a-scene').appendChild(cube);
});

这在Firefox中运行良好，但在Chrome中，实体不会显示。如果查看具有document.querySelector('a-box')之类的实体，则没有object3D属性，因此我不认为将该元素附加到场景中是在Chrome上使用A-Frame注册该元素。我想错在Chrome上工作吗？这是一个pen。

谢谢！

Answer 1

innerHMTL的模板行为可能会有所不同。您可以使用createContextualFragment。要转储A-Frame的原始HTML，请执行以下操作：

el.appendChild(document.createRange().createContextualFragment(str));

Answer 2

也许您可以尝试使用insertAdjacentHTML？那么您可能不需要模板包装器。

A-frame appendChild适用于Firefox但不适用于Chrome

2 个答案: