Create Custom HTML TAG While DOM loading

StackOverflow https://stackoverflow.com/questions/21960946

Question

I am on the way of creating Live Editor,And in that i have to define a function which occurs when DOM Start loading or while Loading..

So in that i have to create a Custom HTML Tag and place it in Document,but not in Body tag,

So if user call it from <head> it just occurs and start its Working whether to see that if DOM loads or not and create a Custom TAG inside or outside the <html>.

Just for Now i write Something that works as given in Jsfiddle - onload,onDomready,No Wrap - in <body> but i want it to work in No Wrap - in <head>

So How to achieve this task ? Is it Possible to create or Add custom TAG before DOM loads ?

Here's My code -

My Fiddle

Was it helpful?

Solution

"So in that i have to create a Custom HTML Tag and place it in Document,but not in Body tag"

For that look into createDocumentFragment and createElement : 

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

This will create the element but not place it within the html body.

RE: custom attributes

Valid custom elements in HTML5 ( <!DOCTYPE html> ) require the name to contain a dash ( - )

And we would need to register and initialise them 

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

These are a couple of answers to.

  1. Creating elements outside of the <body>
  2. How to use custom attributes ( html5 )

Not sure how far that gets you ... hope helps in someway.

*Update/Fix : * Ashish was able to get the code working on his setup by targeting the <HTML> tag rather than the <body> tag and provided the following demo - http://jsfiddle.net/ashish41191/3Bayt/3

OTHER TIPS

It is very bad practice to use a custom HTML tag in (X)HTML:

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

Instead, you should use classes, like this:

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

And in your CSS, instead of HTML_alert, you should use .HTML_alert.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top