javascript - 为什么我不能创建具有多个子节点的 ParentNode？

Question

我有以下带有 A 框架的 html 结构。基本上，我使用以下基本 html 构建原子的 3D 表示:\

  <a-scene>
    <a-entity id=#AtomComponent> 

      <a-sphere id=#nucleus></a-sphere> 

      <a-entity id=#electronShell>
        <a-sphere id=#electron></a-sphere>
      </a-entity>
    </a-entity>
  </a-scene>

为了动态创建它，我使用以下 JavaScript:

let sceneEl = document.querySelector('a-scene'); #grab the main html component

# Create the individual components
let atomComponent = document.createElement('a-entity');

let nucleus = document.createElement('a-sphere');

let electronShell = document.createElement('a-entity');

let electron = document.createElement('a-sphere');

#Append them

sceneEl.appendChild(atomComponent);

atomComponent.appendChild(nucleus);

electronShell.appendChild(atomComponent);

electron.appendChild(electronShell);

也许我累了，但我相信我正在以正确的顺序创建 html 元素。但是，当我尝试执行此代码时，我收到以下两个错误:

material.js:170 Uncaught TypeError: Cannot read property 'dispose' of undefined

`Uncaught (in promise) TypeError: Cannot read property 'isPlaying' of null`

有人可以仔细检查我的 html 看起来是否合法吗？ AtomComponent 应该有两个子组件(nucleus 和 electronShell)，而 electronShell 只有一个子组件。由于我是 A-Frame 新手，并且对 javascript 很生疏，所以我无法确定这是 AFrame 级别错误还是 JS 选择器错误。如有帮助，我们将不胜感激。

Answer 1

使用 atomComponent.appendChild 附加 nucleus 和 electronShell 以拥有多个子级

let sceneEl = document.querySelector('a-scene'); 

let atomComponent = document.createElement('a-entity');

let nucleus = document.createElement('a-sphere');

let electronShell = document.createElement('a-entity');

let electron = document.createElement('a-sphere');

sceneEl.appendChild(atomComponent);

atomComponent.appendChild(nucleus);

atomComponent.appendChild(electronShell);

electronShell.appendChild(electron);
console.log(document.querySelector('a-scene').outerHTML);

<a-scene>
</a-scene>