How to hide div inside iframe using javascript

In this article, you will learn how you can easily hide a div element inside iframe using javascript.

Click on the Hide Div button to hide the div element inside iframe.

How to hide div inside iframe using javascript

In the first example, you will see how to hide a div element using js.

Hide div element inside iframe.
<button onclick="hideDiv()">
  Hide Div
 </button>
<iframe id="iframe-id" src="https://search.3schools.in/p/example.html" style="height:370px;width:100%">      
</iframe>
Try it Yourself »
If you want to work with different domains, then this methods aren't possible.

You can also create the same thing in just one line of jQuery.

Hide div element inside iframe using Jquery
<iframe id="iframe-id" src="https://search.3schools.in/p/example.html" style="height:370px;width:100%">
  </iframe>

<script>
function hideDiv() {
   $('#iframe-id').contents().find('#div').hide();
 }
</script>
Try it Yourself »

How to change element style inside iframe.

Now, In this example, I will show you how you can also change the style of an element inside iframe using javascript.

Apply style to an element inside iframe.
<iframe id="iframe-id" src="https://search.3schools.in/p/example.html" style="height:370px;width:100%">
 </iframe>

<script>
function changeStyle() {
  const myIframe = document.getElementById("iframe-id");
  const divElement = myIframe.contentWindow.document.querySelector("#div");
  divElement.style = "border:2px solid red;background-color:#ff0";
}
</script>
Try it Yourself »

How to add a new button inside iframe using js.

Let add a new button element inside iframe using javascript dynamically. you can also add div, heading, paragraph, link etc. using the createElement() method.

Add a new button element inside iframe.
<iframe id="iframe-id" src="https://search.3schools.in/p/example.html" style="height:370px;width:100%">
</iframe>

<script>
function addBtn() {
  const myIframe = document.getElementById("iframe-id");
  const divElement = myIframe.contentWindow.document.querySelector('#div');
  const newElement = document.createElement('button');
  newElement.innerHTML="New Button Element";
  divElement.appendChild(newElement);
 }
</script>
Try it Yourself »

Conclusion

In this article, you have learned to

  1. Hide an element inside iframe using javascript and Jquery.
  2. Change element style inside iframe.
  3. Add a new button inside iframe dynamically.