为什么不能创建多个 children 的 ParentNode？

Question

我有以下 html 结构 A-Frame。基本上，我正在使用以下基本 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应该有两个children（nucleus和electronShell）而electronShell只有一个child。由于我是 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>

为什么不能创建多个 children 的 ParentNode？

Why can I not create a ParentNode with multiple children?

html

javascript

jquery

aframe