Javascript 标记未使用appendChild（元素）结束。（缺少<；/canvas>；标记，所有其他标记均正确关闭）

非常奇怪的问题。我有一些代码：

var container = document.getElementById("graph"); //container element
console.log("Containers id is " + container.id);  //graph

var element = document.createElement(this.componentType); //"canvas"
element.id = "canvasId";

console.log(element.outerHTML); //<canvas id="canvasId"></canvas>
//container.innerHTML = element.outerHTML;
document.getElementById("graph").appendChild(element);

或

然后它将应用结束标记，即

<div id="canvasId"></div> 

然后它将只生成开始标记

<canvas>

没有结束标记！尽管console.log显示结束标记！ 所以我得到了一个结束标记，但无论我使用appendChild技术还是outerHtml技术，文档都只应用canvas（）的开始标记。加载其他标记和自定义标记

我在侧面检查了几个类似的问题，并认为答案是害羞的（在页面的中间）。但reddit上的其他人显示他的代码是有效的

var element = document.createElement('canvas'); 
document.body.appendChild(element);
console.log(element.outerHTML); // "<canvas></canvas>"

var-element=document.createElement（'canvas'）；
document.body.appendChild（元素）；
console.log（element.outerHTML）；//""

我检查了Chrome和Safari，它们在开发工具中都有相同的结果。如果是画布，则仅显示开始标记。所有其他人都表现得很好

---

编辑：

叹息。因此，在编写了一个简单的html文件，但在正文中没有任何内容（仍然存在相同的问题）之后，我发现了一个丑陋的解决方案：

document.body.innerHTML = "<div><canvas>" + " <canvas></div>"; 

document.body.innerHTML=“”+”；

但是，它插入了一个额外的。至少它关闭并使用id画布：/

<div><canvas><canvas></canvas></div>

此外，如果不在中间加上+，则只得到

<div><canvas> </div>

。我在用pyCharm。我认为这是一个pyCharm localserver错误，所以我用textEdit编写了一个单独的html文件，但在没有运行服务器的情况下加载时得到了相同的结果。下一站，我将在Windows中试用，看看是不是我的系统出了问题

编辑：已确认在Windows中工作。看来我的下一步是更新/刷新osx yosemite

编辑：包括Teemus解释：

---

是的，就是这样。我想这是Chrome控制台的一个功能。DOM的HTML已正确创建。画布没有内容，因此不需要结束标记（仅在控制台中，HTML当然需要它）。如果您将一些文本添加到新创建的canvas元素中，您也会在Chrome开发工具中看到结束标记蒂姆

---

我仍然觉得奇怪，在Windows中它工作正常，但在OSX（Safari&Chrome）中，结果是一样的。所以我想，这个问题已经得到了回答

你使用的是什么版本的Chrome？我使用的是最新的，效果很好。这是

#graph

，它是哪种类型的元素？我做了（我希望我已经理解了这个问题？），而且它似乎工作得很好，也在Chrome54中…？蒂姆：就是这样，但我需要看到页面上的画布元素。另外在页面源码中，我只得到了。最后没有。但它是“console.logs”谷歌版本：54.0.2840.71（64位），晚餐后会更新，仅此而已。我想这是Chrome控制台的一个功能。DOM的HTML已正确创建。画布没有内容，因此不需要结束标记（仅在控制台中，HTML当然需要它）。如果您想在新创建的canvas元素中添加一些文本，也可以在chromedev工具中添加。

var element = document.createElement('canvas'); 
document.body.appendChild(element);
console.log(element.outerHTML); // "<canvas></canvas>"

document.body.innerHTML = "<div><canvas>" + " <canvas></div>"; 

<div><canvas><canvas></canvas></div>

<div><canvas> </div>