I would only want to render/create <p>Hello</p><iframe id="syndicationPanelModalIFrame" src="http://sample.com" width="100%" height="100%" style="border: none">
on page load.
I don’t want to declare them already but I want to trigger JS and create them once page loads.
Pls see “Expected Output” below
EXPECTED OUTPUT
<style> .newSyndicationModalContainer { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 9999; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } .newSyndicationModalContent { background-color: transparent; margin: auto; width: 100%; height: 100%; } </style> <div class="newSyndicationModalContainer"> <div class="newSyndicationModalContent"> <p>Hello</p><iframe id="syndicationPanelModalIFrame" src="http://sample.com" width="100%" height="100%" style="border: none"></iframe> </div> </div>
Current Code
<script> const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer") const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent") if (newSyndicationModalContainer) { var modal = document.createElement(`<p>Hello</p><iframe id="syndicationPanelModalIFrame" src="http://sample.com" width="100%" height="100%" style="border: none"></iframe>`); newSyndicationModalContainer.appendChild(modal); newSyndicationModalContainer.style.display = 'block'; } </script>
Advertisement
Answer
Okay, I got it;
Use this code:
const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer") const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent") if (newSyndicationModalContainer != undefined) { var p = document.createElement('p'); p.innerText = "Hello!"; var iframe = document.createElement('iframe'); iframe.id = "syndicationPanelModalIFrame"; iframe.src = "http://sample.com"; iframe.width = "100%"; iframe.height = "100%"; iframe.style.border = "none"; newSyndicationModalContent.append(p, iframe); newSyndicationModalContainer.style.display = 'block'; }
.newSyndicationModalContainer { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); } .newSyndicationModalContent { background-color: transparent; margin: auto; width: 100%; height: 100%; }
<div class="newSyndicationModalContainer"> <div class="newSyndicationModalContent"> </div> </div>
Another way of doing it with innerHTML
Although it’s not a good way to do it, I’ll do it for you as you asked:
const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer") const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent") if (newSyndicationModalContainer != undefined) { newSyndicationModalContent.innerHTML = `<p>Hello</p><iframe src="https://sample.com" id="syndicationPanelModalIFrame" width="100%" height="100% style="border: none;"`; newSyndicationModalContainer.style.display = 'block'; }
.newSyndicationModalContainer { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); } .newSyndicationModalContent { background-color: transparent; margin: auto; width: 100%; height: 100%; }
<div class="newSyndicationModalContainer"> <div class="newSyndicationModalContent"> </div> </div>
Regarding the question in the comments
let’s say its not always iframe inside there is always. So I don’t want to declare iframe src = … Can we do it like innerHtml? –
You can always create an element and edit its outerHTML/innerHTML/innerText/etc.
For instance:
let div = document.createElement("div"); div.innerHTML = `<span class="innerSpan" style="border: 5px ridge red" data-blablablah="I-don't-say-bla-bla-blah">Bla Bla Bla Blah</span>`; div.style = "dispaly: grid";