标签没有使用appendChild(element)关闭.(缺少</画布>标签，所有其他关闭正确)

Tag is not closing with appendChild(element). (missing the </canvas> tag, all others close properly)

本文关键字：标签 其他 画布 element 关闭 缺少 appendChild      更新时间：2023-09-26

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

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>

没有结束标签!EVEN THOUGH!log显示结束标记!所以我确实得到了一个结束标记，但是无论我使用appendChild技术还是outerHtml技术，Document都只应用canvas()的开始标记。其他标签和自定义标签加载。

我在旁边检查了一些类似的问题，并认为答案会在这里(在页面的中间)。但是reddit上的其他人证明了他的代码是有效的。

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

我检查了Chrome和Safari，两者在开发工具中都有相同的结果。如果是canvas，则只显示开始标记。

编辑:结果

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

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

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

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

同样，如果我不在中间加上+，我只得到一个

<div><canvas> </div>

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

EDIT: 确认在Windows下工作。看来我的下一步是更新/刷新osx yosemite。

编辑:包括Teemus的解释:

是的，就是这样。我猜这是Chrome控制台的一个功能。正确地创建了到DOM的HTML。Canvas没有内容，因此它不需要结束标签(仅在控制台中，HTML当然需要)。如果你在新创建的画布元素中添加一些文本，你也会在Chrome开发工具中看到结束标签。- Teemu

我仍然觉得奇怪的是，在Windows下它工作正常，但在OSX (Safari &;Chrome)，结果是一样的。所以我想，这个问题是有答案的。

相关文章：