一个canvas元素可以嵌套多少个div有限制吗？答案

【问题标题】：Are there limits to how many div's a canvas element can be nested it?一个canvas元素可以嵌套多少个div有限制吗？
【发布时间】：2017-09-28 07:30:32
【问题描述】：

我在 div 内的画布中进行了一些 webGL(threejs) 渲染，其工作方式与我对以下结构的想法完全一样...

<body>
   <div id='header'></div>
   <div id="webGLDiv">
      <script></script>
   </div>
   <div id='someInfo'></div>
</body>

但是，当我将 webGLDiv 嵌套到这样的父 div 中时......

<body>
   <div id="websiteContents">
      <div id='header'></div>
      <div id="webGLDiv">
         <script></script>
      </div>
   <div id='someInfo'></div>
   </div>
</body>

在浏览器中，脚本信息保留在 webGLDiv 中，但 canvas 元素被推送到结束 body 标记的正上方。

有人不知道为什么会这样吗？在我上面的第一个示例中，画布被放置在 webGLDiv 之后。

【问题讨论】：

什么画布？我看不到画布
该画布元素在运行时生成它。我是自学成才 - 这是我让它工作的唯一方法是在我的第一个示例中。
画布seems to 的位置取决于您在脚本中对渲染器的domElement 执行的操作。你也可以分享你的那部分代码吗？
别担心，我们大多数人，如果不是全部的话，都是自学的:)
哈哈谢谢鼓励！！这里的链接是指向小提琴的链接。如果我删除“ab3d-website” div，它可以正常工作，如上面示例中所述jsfiddle.net/#&togetherjs=3zgJl4fEph

标签： javascript html canvas three.js

【解决方案1】：

<canvas> 的位置由脚本中的这一行控制：

document.body.appendChild(renderer.domElement);

renderer.domElement 是您的 <canvas>，document.body 是它所在的父元素。（Three.js 没有为此使用 <script> 元素的位置。）

要更改其放置位置，您需要指定不同的父元素。要将其设为<div id="webGLDiv">，您可以使用：

document.getElementById('webGLDiv').appendChild(renderer.domElement);

【讨论】：

感谢 Jonathan Lonowski，成功了！