Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


How can I create custom HTML elements with Javascript?

I want to be able to, for example, create the <equation> tag that makes all equations have a gray background and have a 3px solid blue border.

3 Answers

It sounds like you are asking for two things - how to create an element and how to style an element but I'm leaning towards the latter. Here is a article on adding a class from w3schools

Owa Aquino
Owa Aquino
19,277 Points

You cannot create your custom HTML element with plain javascript. Creating an HTML Element using javascript still requires a proper HTML element which is the browser supports, like p, h1, input, etc. If you really wanted to create your own element I suggest using javascript frameworks like React, Angular, or Vue.

As a workaround, you can do is create a paragraph element and add a class or id to it. And add your styles using CSS.

Hope this helps.

Cooper Runstein
Cooper Runstein
11,850 Points

You need classes, ignore the idea of using React, Angular or Vue to create your own custom elements, all three use the same elements you're working with now, and none of them are going to be any more helpful in creating your own elements than vanilla JS. I've seen libraries that do this, but for most anything, css classes can accomplish what you want to do. I'd argue descriptive class names are more effective anyway since you can add more than one class to a single element.