JavaScript allows us to dynamically add and remove elements to the document. We can use event listeners and special JavaScript methods to create and remove HTML elements. This article focuses on creating and removing iframe elements dynamically using JavaScript.
Let’s first create a basic structure of the document using buttons and other elements. Buttons will allow us to call the JavaScript methods.
Flow Diagram Image for better understanding:
The following code is the implementation of the basic structure of the document. there are two buttons, the first button will invoke CreateIframeElement() method to dynamically create an iframe element and the second button will invoke RemoveIframeElement() method to remove the iframe.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <h2 style="color:green">neveropen</h2> <h3>Dynamically create and remove iframes</h3> <div id="display"></div> <button onclick="CreateIframeElement()"> CreateIframe </button> <button onclick="RemoveIframeElement()"> RemoveIframe </button> </body> </html> |
Output: The following is the output of the above implementation:
Now let’s implement the javascript methods that will create and remove iframe. The following javascript method will dynamically create an iframe element using the document.createElement(“iframe”) method and will append it to div as a child element using the appendChild(el) method.
Javascript
const CreateIframeElement = () => { // Creating iframe element var el = document.createElement("iframe"); // Setting the values for the attributes el.srcdoc = `<h1>.Iframe Element.</h1> <p> Hello Geek! <br> How are you? </p>`; el.width = "400px"; el.height = "200px"; // Adding the created iframe to div as // a child element document.getElementById("display").appendChild(el); } |
The removeChild(document.getElementById(“display”).lastChild) method will remove the last child of the div. This child is the iframe element that we have created previously.
Javascript
const RemoveIframeElement = () => { // Remove the last child (iframe element) of div document.getElementById("display") .removeChild(document .getElementById("display").lastChild); } |
The following is the overall implementation of the program, which can dynamically create and remove iframe elements.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <h2 style="color:green;"> neveropen </h2> <h3>Dynamically create and remove iframes</h3> <div id="display"></div> <button onclick="CreateIframeElement()"> CreateIframe </button> <button onclick="RemoveIframeElement()"> RemoveIframe </button> <script> const CreateIframeElement = () => { // Creating iframe element. var el = document.createElement("iframe"); // setting the values for the attributes. el.srcdoc = `<h1>.Iframe Element.</h1> <p> Hello Geek! <br> How are you? </p>`; el.width = "400px"; el.height = "200px"; // Adding the created iframe to div as a child element document.getElementById("display").appendChild(el); } const RemoveIframeElement = () => { // Remove the last child ( iframe element ) of div. document.getElementById("display") .removeChild(document .getElementById("display").lastChild); } </script> </body> </html> |
Output: The following gif output shows the working of both the buttons as well as the working of javascript methods that are creating and removing iframe elements.
