JavaScript : How to add iframe after every paragraph?

Question

I'm new to JavaScript and expect a answer from expert.

Suppose following is my piece of content -

<p> This is the first paragraph </p>
<p> This is the second paragraph </p>

and, I want to add few block of code after every paragraph and code became following -

<p> This is the first paragraph </p>
<figure class="x">
  <iframe width="300" height="250" style="border:0; margin:0;" src="#">
  </iframe>
</figure>
<p> This is the second paragraph </p>
<figure class="x">
  <iframe width="300" height="250" style="border:0; margin:0;" src="#">
  </iframe>
</figure>

Show us what you have tried. SO isn't a free code writing service. The objective here is for you to post your attempts to solve your own issue and others help when they don't work as expected. See [ask] and [mcve] — charlietfl, May 22 '21 at 22:02
Thank you for your suggestions. I will do research and and ask questions next time. — Binod Bhattarai, Apr 07 '22 at 13:07

Rob Smitha · Accepted Answer · 2022-04-07T14:55:01.487

You can try this javascript to get started.

// get all "p" tags
var elements = document.getElementsByTagName('p');

for (var i = 0; i < elements.length; i++) {
    // create figure
    const figure = document.createElement("figure");
    figure.className = "x";
    // create iframe
    const iframe = document.createElement("iframe");
    iframe.setAttribute("width", "300");
    iframe.setAttribute("height", "250");
    iframe.setAttribute("href", "#");
    iframe.style.border = 0;
    iframe.style.margin = 0;
    figure.appendChild(iframe);
    // append to "p" tag
    elements[i].parentNode.insertBefore(figure, elements[i].nextSibling);
}

OP want `figure` after every `p` not child of `p`. – DecPK May 22 '21 at 22:27 — DecPK, May 22 '21 at 22:27

score 0 · Answer 2 · answered May 22 '21 at 22:23

You need to create figure HTML element that has a child iframe and then add the figure element after every p

How to insert an element after another element in JavaScript without using a library?

const paras = document.querySelectorAll("p");

function createIframe(width, height, style, src) {
  const iframe = document.createElement("iframe");
  iframe.setAttribute("width", width);
  iframe.setAttribute("height", height);
  iframe.setAttribute("style", style);
  iframe.setAttribute("src", src);

  return iframe;
}

function createFigureElement() {
  const figure = document.createElement("figure");
  figure.classList.add("x");

  figure.appendChild(createIframe("300", "250", "border:0; margin:0;", "#"));
  return figure;
}

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
paras.forEach((p) => {
  insertAfter(p, createFigureElement());
});

<p> This is the first paragraph </p>
<p> This is the second paragraph </p>

score 0 · Answer 3 · answered May 22 '21 at 22:35

Probably the shortest way:

document.querySelectorAll('p').forEach(p => {
    p.insertAdjacentHTML('afterEnd', 
        `<figure class="x">
             <iframe width="300" height="250" style="border:0; margin:0;" src="#"></iframe>
        </figure>`
    );
})

<p> This is the first paragraph </p>
<p> This is the second paragraph </p>

JavaScript : How to add iframe after every paragraph?

3 Answers3