在 DOM 加载时创建自定义 HTML TAG答案

【问题标题】：Create Custom HTML TAG While DOM loading在 DOM 加载时创建自定义 HTML TAG
【发布时间】：2014-03-24 12:47:12
【问题描述】：

我正在创建Live Editor，并且我必须定义一个在DOM开始加载或加载时发生的函数..

所以我必须创建一个自定义 HTML 标记并将其放置在 Document 中，而不是 Body 标记中，

因此，如果用户从<head> 调用它，它就会发生并开始它的工作是否查看DOM 是否加载并在<html> 内部或外部创建一个自定义TAG。

现在我写的东西可以在 Jsfiddle 中工作 - onload,onDomready,No Wrap - in <body> 但我希望它在 No Wrap - in <head> 中工作

那么如何实现这个任务呢？是否可以在 DOM 加载之前创建或添加自定义标签？

这是我的代码 -

【问题讨论】：

【解决方案1】：

“所以我必须创建一个自定义 HTML 标记并将其放置在文档，但不在 Body 标签中”

为此，请查看 createDocumentFragment 和 createElement：

var newfrag = document.createDocumentFragment(),
element = document.createElement("div");
element.innerHTML = "Test";
newfrag.appendChild(element);

这将创建元素，但不会将其放置在 html 正文中。

RE：自定义属性

HTML5 中的有效自定义元素 (<!DOCTYPE html>) 要求名称中包含破折号 (-)

我们需要注册并初始化它们

var newElement = document.registerElement('custom-element');
var element = document.createElement( new newElement() );

这些是几个答案。

不知道这能让你走多远……希望能有所帮助。

*更新/修复：* Ashish 能够通过定位<HTML> 标记而不是<body> 标记来让代码在他的设置上运行，并提供了以下演示 - http://jsfiddle.net/ashish41191/3Bayt/3

【讨论】：

是的，你说得对，我也谷歌了很多，通过使用这个类似的关键字但没有找到那么多，但我会按照你说的尝试，如果它有效，那么很快就会更新你吗？感谢您参与其中！ @Rob Sedgwick
嗨@AshishMishra，您刚刚将此代码粘贴到您的jsfiddle中间：)
这只是在回答您的问题：“是否可以在 DOM 加载之前创建或添加自定义标签？” - 是的^^ - 在那之后，我不确定你想要达到什么目标，并且需要更多信息。谢谢。
为什么需要在<head> 中运行所有这些东西？
我不知道我做了什么，但很高兴它的工作:) 很棒的东西@AshishMishra - 是的<html> 在那里，但要小心一些浏览器，他们可能会抱怨因为<html> 不是尚未关闭。

【解决方案2】：

在 (X)HTML 中使用自定义 HTML 标记是非常糟糕的做法：

var _A = document.createElement('HTML_alert');

相反，您应该使用类，如下所示：

var _A = document.createElement('div');
_A.className = 'HTML_alert';

在你的 CSS 中，你应该使用 .HTML_alert，而不是 HTML_alert。

【讨论】：

对不起，我是DOM的新手，所以JS中的类信息不多，请定义如何使用类来完成这个任务？
好的，你谈论的是class，但我希望它在 DOM 启动之前或加载时加载，是否不可能在 DOM 加载之前创建 div ！因为它是一部分的body tag。那么我将如何获得已发布问题的解决方案？
@AshishMishra 是的，这就是我要说的。
哦，我试试看，然后更新你是否是解决方案..@牙刷