Add New Elements

You can also add any new element to HTML with a browser trick. This example adds a new element called <myHero> to HTML, and defines a display style for it:

HTML file:	Displayed by browser:
<head> <title>Creating an HTML Element</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <myHero>My First Hero</myHero> </body>	My First Heading My first paragraph. My First Hero

HTML file:

Displayed by browser:

<head>
<title>Creating an HTML Element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
    display: block;
      background-color: #ddd;
      padding: 50px;
      font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>

My First Heading

My first paragraph.

My First Hero

The JavaScript statement document.createElement("myHero") is added, to take advantage of the myHero declaration which is a "new element" (in this document only).