How to create an HTML element using TypeScript

avatar

Borislav Hadzhiev

Thu Mar 31 20223 min read

banner

Photo by Jason Zook

Create an HTML element using TypeScript #

To create an HTML element in TypeScript:

  1. Use the document.createElement() method to create the element.
  2. Set any properties or inner html on the created element.
  3. Add the element to the page using the appendChild() method.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <div id="box"></div> <script src="./src/index.ts"></script> </body> </html>

And here is the related TypeScript code.

src/index.ts
const el = document.createElement('div'); // ✅ Add text content to element el.textContent = 'Hello world'; // ✅ Or set the innerHTML of the element // el.innerHTML = `<span>Hello world</span>`; // ✅ (Optionally) Set Attributes on Element el.setAttribute('title', 'my-title'); // ✅ (Optionally) Set styles on Element // el.style.backgroundColor = 'salmon'; // el.style.color = 'white'; // ✅ add element to DOM const box = document.getElementById('box'); box?.appendChild(el);

We used the document.createElement method to create the element.

The only parameter we passed to the method is the type of element to be created (div in the example).

The createElement method returns the newly created element.

You can use the textContent property to set the element's text content or the innerHTML property to set the element's inner HTML markup.

Here is an example that sets the inner HTML of the element.

src/index.ts
const el = document.createElement('div'); el.innerHTML = ` <span style="background-color: salmon; color: white;"> Hello world </span> `; // ✅ (Optionally) Set Attributes on Element el.setAttribute('title', 'my-title'); // ✅ (Optionally) Set styles on Element // el.style.backgroundColor = 'salmon'; // el.style.color = 'white'; // ✅ add element to DOM const box = document.getElementById('box'); box?.appendChild(el);

I used backticks `` (not single quotes) to wrap the HTML string, because backticks allow us to easily create a multi-line string.

You shouldn't use the innerHTML property with user provided data without escaping it. This would leave your application open to cross-site scripting attacks.

If you need to set attributes on the element, use the setAttribute method.

The setAttribute method takes 2 parameters:

  1. name - the name of the attribute whose value is to be set.
  2. value - the value to assign to the attribute.

In the example, we set the value of the element's title attribute to my-title.

src/index.ts
const el = document.createElement('div'); el.innerHTML = ` <span style="background-color: salmon; color: white;"> Hello world </span> `; el.setAttribute('title', 'my-title'); // ✅ add element to DOM const box = document.getElementById('box'); box?.appendChild(el);
If the attribute already exists, the value is updated, otherwise a new attribute is added with the specified name and value.

You can set styles on the element by setting properties on its style object.

src/index.ts
const el = document.createElement('div'); el.innerHTML = ` <span> Hello world </span> `; el.style.backgroundColor = 'salmon'; el.style.color = 'white'; // ✅ add element to DOM const box = document.getElementById('box'); box?.appendChild(el);

Note that multi-word properties are camel-cased when using the style object.

You can use the appendChild method to add the element to the page.

The method adds a node to the end of the list of children of the element it was called on.

Notice that we used the optional chaining (?.) operator before accessing the appendChild method.

The optional chaining (?.) operator short-circuits if the reference is nullish (null or undefined).

In other words, if the box variable stores a null value, we won't attempt to call the appendChild method on null and get a runtime error.

The box variable is possibly null, because if the document.getElementById() method does not find an element with the provided id, it returns null.

Use the search field on my Home Page to filter through my more than 1,000 articles.