Warning: session_start(): open(/tmp/sess_18ac0030b252d75c910acf7213e2450a, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How to create an HTML element using Typescript - LearnShareIT

How to create an HTML element using Typescript

To create an HTML element using TypeScript

To create an HTML element using Typescript you can directly create element. So how to do it? – Let’s go into detail.

How to create an HTML element using Typescript

Directly create element

To directly create the element, we would use the innerHTML method. The innerHTML method will help you to insert exactly what you write inside the HTML element, which means we can also create an element in Typescript just like with HTML.

Syntax:

Element.innerHTML = value

Example:

const div = document.querySelector('div')
div.innerHTML = '<h1>Hello From Learn Share IT</h1>'

Output:

What we pass in innerHTML will be passed in the HTML file exactly.

Example:

const div = document.querySelector('div')
div.innerHTML = '<h1>Hello From Learn Share IT </h1><h2>Nice to meet you</h2>'

Output:

What my HTML file will get:

Using document.createElement()

HTML document provided us with the document.createElement() helps you to create a new element, and you can specify the type, and we can set it for that element.

Syntax:

document.createElement(tagName)

Parameters:

tagName: Indicate the type of element that you want to be created.

Example:

const divEle = document.createElement('h1')

After creating a new element, your element won’t show yet because the element stores in divEle variable and have not have content or location to stay. So Typescript provided us with some methods that help you to do it.

Example:

const divEle = document.querySelector('div')
const h1Ele = document.createElement('h1')
h1Ele.textContent = 'Hello From Learn Share IT'
divEle.append(h1Ele)

Output:

This is what my HTML file gets:

Here the textContent method also inserts text into the content of the element. It might look like innerHTML, but textContent only inserts inside the element. If we try to insert some element with innerHTML, it won’t work.

Example:

const divEle = document.querySelector('div')
const h1Ele = document.createElement('h1')
h1Ele.textContent = '<h1>Hello From Learn Share IT</h1>'
divEle.append(h1Ele)

Output:

The append method will help me to append the h1 element I just created after the last child of the div element.

We can also style for our element by the setAttribute method

Example:

const divEle = document.querySelector('div')
const h1Ele = document.createElement('h1')
h1Ele.textContent = 'Hello From Learn Share IT'
divEle.append(h1Ele)
h1Ele.setAttribute('class','h1Style')

Output:

This is what my HTML file will get:

This is my CSS file:

.h1Style {
  color: green;
  font-weight: bold;
}

Summary: 

I showed you how to create an HTML element using Typescript in this tutorial. You can create directly in the HTML file by the innerHTML method or use the createElement method to set your element.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *