Creation of dynamic HTML Part II

In this post, I am about to write about the way of creating dynamic HTML using javascript using a JS function called createElement.

The process is pretty straight forward unlike the other dynamic HTML way where we dump HTML into innerHTML of a dummy tag.

Here we can create new tags entirely without using dummy tags.

Here is the HTML/JS code I've written.

1:  <html>  
2:  <head>  
3:  <script>  
4:  function function1()  
5:  {  
6:       var var1 = document.createElement("center");  
7:       var var2 = document.createElement("p");  
8:       var2.style.color="teal";  
9:       var2.style.fontSize="20px";  
10:       var2.innerHTML = "Dynamic HTML Paragraph";  
11:       var2.id="id1";  
12:       var var3 = document.createElement("button");  
13:       var3.textContent="Click here to delete the dynamic HTML";  
14:       var3.id="id2";  
15:       var3.onclick = function()   
16:       {  
17:            var var4 = confirm("You sure ?");  
18:            if(var4)  
19:            {  
20:                 var var5 = document.getElementById("id1");  
21:                 var5.parentNode.removeChild(var5);  
22:                 var var6 = document.getElementById("id2");  
23:                 var6.parentNode.removeChild(var6);  
24:            }  
25:       };  
26:       var1.appendChild(var2);  
27:       var1.appendChild(var3);  
28:       document.body.appendChild(var1);  
29:  }  
30:  </script>  
31:  </head>  
32:  <body onload="function1(); ">  
33:  <h3>Creation of dynamic HTML using javascript createElement (This is static ofcourse) &#9786</h3>  
34:  </body>  
35:  </html>  

In the above code in line number 33, I have written static HTML code.

In script tag I have written a function and called it onload of body.

In the function in line 4, I have took sort of a parent element "center" tag using createElement as in line 6.

I went ahead and created two more tags "p" and "button" using createElement.

Important part is that we have to attach these two elements to center tag.

I assumed center tag as a parent tag.

In turn I attached this center tag to body as in line 28.

I have also included onclick functionality for the button tag.

On clicking the button you will be asked if you want to delete. If we say Yes, it deletes both the p button tags created dynamically.

I used the code in lines 20-23 for deleting the tags.

I felt this is a very efficient way to create HTML tags in javascript as I am able to control almost everything of the tag in javascript, instead of writing HTML and dumping HTML as a string into innerHTML.

For instance if I wanted to control the color of the tag. I am first creating the element like

var var1 = document.createElement("p");

var1.innerHTML="P tag";

var1.style.color="lime";

var1.style.fontSize="20px";

I figured style's usage is like

we generally use

<p style="color:lime;font-size:20px;"></p>

in javascript this becomes variable.style(attribute).color(property)="lime"(value );

You can paste the above code in a notepad and save it as HTML and try it out on your own.

Happy learning.

Suggestions are very much appreciated.