标签没有用appendChild（元素）关闭。 （缺少标签，所有其他标签正确关闭）

Question

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

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);

代码似乎起作用。如果

this.componentType = "div" 

或

this.componentType = "custom" 

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

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

或

<custom id="canvasId"></custom>

但是如果

this.componentType = "canvas"

然后它只会产生开始标记

<canvas>

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

我检查了一些类似的问题，并认为答案是here由绵羊（在页面中间）。但reddit上的其他人表示他的代码有效。

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

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

编辑：Results

Answer 1

叹息。所以在对一个简单的html文件进行编码后，身体中没有任何东西（并且仍然是同样的问题），我发现了一个UGLY解决方案：

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

但是，它会额外插入。至少它关闭并使用id＆＃39; d canvas：/

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

另外，如果我不在中间添加+，我只会得到一个

<div><canvas> </div>

。我正在使用pyCharm。我认为这是一个pyCharm localserver错误，所以我在textEdit中写了一个单独的html文件，但在没有运行服务器的情况下得到了相同的结果。下一站，在Windows中尝试一下，看看它的系统是不是很复杂。

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

编辑：包括Teemus解释：

  

是的，就是这样。我想这是Chrome控制台中的一项功能。正确创建了DOM的HTML。 Canvas没有内容，因此它不需要结束标记（仅在控制台中，HTML需要它）。如果您要在新创建的canvas元素中添加一些文字，那么您也可以在Chrome开发工具中查看结束标记。 - Teemu

我仍觉得奇怪的是，在Windows中它运行正常，但在OSX（Safari和Chrome）中，结果是一样的。所以我猜，这个问题得到了回答。