Skip to content

Dynamically Create and Set Nested Div in JavaScript

Joseph

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";