How to append Iframe in div using javascript

Question

I was trying to append an Iframe embed to a div element using javascript but I'm getting an error when trying to append it using innerHtml. Is there any way to append an Iframe in a div using javascript. My current code is attached below. Thanks in advance.

function addCode() {
  document.getElementById("add_to_me").innerHTML +=
    "<iframe width="
  1263 " height="
  480 " src="
  https: //www.youtube.com/embed/zogtwLQQEfY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>";
}

<div id="add_to_me">
  <h3> Heading</h3>
  <!--embed Iframe here-->
</div>

Ori Drori · Accepted Answer · 2021-03-27 10:38:39Z

2

The string contains attributes that are wrapped with double quotes - ". Wrap the entire string with single quotes - '.

document.getElementById("add_to_me").innerHTML +=
  '<iframe width="1263" height="480" src="https://www.youtube.com/embed/zogtwLQQEfY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

<div id="add_to_me">
  <h3> Heading</h3>
  <!--embed Iframe here-->
</div>

answered Mar 27, 2021 at 10:38

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

anon10023108 Over a year ago

is there any way to save that appended code to the default HTML permanently @Ori Drori

Ori Drori Over a year ago

You'll need to change the original HTML file to do so. The other option is to change via JS if you can add it to the page.

anon10023108 Over a year ago

By change the original HTML You mean recreating a new file with the updated code in it? If so does this mean there is no way of updating the default code automatically when the addcode function runs?@Ori Drori

Ori Drori Over a year ago

Sorry. I don't understand what you need.

Collectives™ on Stack Overflow

How to append Iframe in div using javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related