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.
In the above code in line number 33, I have written static HTML code.
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) ☺</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.
