Create Nested HTML tags dynamically in lightning

Suyash N
Suyash N 1.2k Views Add a Comment

Hey Users,

Sometimes lightning components are slow and bigger to use in our parent code. The replacement of a few simple lightning components is HTML tags or nested HTML tags. A lightning component is made up of many things and consists of many properties. If you want a use a simpler version of code, better to use an HTML tag/component. That makes our code light.

Dynamic component creation is easy to write and use. You can call your custom component or native lightning components. You can also create HTML tags dynamically and append them to any div of your choice. So, let’s create a component dynamically.

Why create a component dynamically?
Creating components dynamically will make your code more efficient and modular. You can dynamically create any component and destroy it when it is done. This will save memory and prevent memory leaks.

Demo GIF:

dynamic nested html components tags

Step-1: Create the DynamicNestedHTMLTags lightning component.

For creating a new lightning component navigate to Developer Console > File > New > Lightning Component

Enter Name & Description and click Submit. Now component markup file will open by default. In the right sidebar, click on Controller to create JS Controller too.

In the DynamicNestedHTMLTags.cmp , paste the below code.

Step-2: Add dynamic creation code to the JS controller.

open the controller file DynamicNestedHTMLTagsController.js and paste the below code.

Step-3: Now we will call the component.

Here we go, our component is ready to use now.

Also, Check – Create and Destroy Lightning components Dynamically.

Cheers … 🙂

Share This Article
Leave a comment
Notify of
Inline Feedbacks
View all comments