Posted in
4712
12:35 am, September 5, 2022
wrap an iframe with another div inside another div
so lets say you had an iframe within another div and that div had the class called content.
you cant actually edit the page content but you can add some jquery to the page
can you add a wrapper to the iframe within the div called content?
yes you can use the wrap() jquery function to do this see the demo code below
Javascript
$( ".content iframe" ).wrap( "<div class='wrapme'></div>" );
Example showing the wrapme div surrounding the iframe
HTML
<div class="content">
<p>My Content, if you inspect the following code it should have a wrapper div called wrapme added to it. </p>
<iframe></iframe>
<p>I know you probably shouldnt be using iframes, but still people use them for some reason... </p>
</div>
Scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Javascript
$( ".content iframe" ).wrap( "<div class='wrapme'></div>" );
My Content, if you inspect the following code it should have a wrapper div called wrapme added to it.
I know you probably shouldnt be using iframes, but still people use them for some reason...
View Statistics
This Week
193
This Month
656
This Year
1673
Add Comment
Other Items in jquery
wrap an iframe with another div inside another div
add a custom event trigger in jquery document ready
fancybox inline auto size modal easy
jquery load wait function
add a toggle with jquery and change the class
load json data url with jquery
validate email address from string with jquery working function
mouse enter mouse leave jquery hover hoverout
simulate a click on an element with jquery
append a #link to the end of all href urls on a target
scroll down the page using a button click
check if a ul contains a ul li
jquery check if a sub element exists
jquery toggle menu testing
json load from jquery and loop through the results
json jquery ajax request
add click event to multiple link items and load the link content into a target div ajax
add click event to multiple link items
Uncaught TypeError: $(...).slideToggle is not a function
jquery page search [testing]
animate and zoom six elements on a timer [addClass, removeClass, setTimeout]
add a jquery date picker to your text box
replicating the bootstrap dropdown toggle in jquery
using jquery appear for checking if an element is visible on screen
fix for Uncaught TypeError: e.indexOf is not a function
add a class or remove it based on window scroll location
find and replace hrefs in existing page links using jquery
get the href value using jquery
jquery document ready with foundation init as well
jquery add a click function if the window size is greater than target_width
jquery enable and disable attribute
jquery click function
Change link target with JQuery
document ready wordpress jquery
Related Search Terms
Other Categories in Code
alpine js apps c css factorio font awesome images linux quick modals sqlite site bugs site updates slick slider sliders testing windows apps apache api apps asp bat bootstrap bootstrap templates charts cookies core css css filters css grid design elements docker domains emoji fancybox fonts foundation framework gimp git html icons ideas image formatting images javascript javascript functions jquery js linux mac misc modals mysql nginx node php php errors php function php functions php simple html dom pi400 python react regex sections simple_html_dom simplepie php site bugs site documentation slick slider sql sqlite ssh sublime svg svg css templates tools virtual box vscode vue webdev windows windows 11 windows commands wordpress