Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Inserting Textarea Value into an iFrame</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <style> textarea, iframe{ display: block; margin: 10px 0; } iframe{ width: 500px; border: 1px solid #a9a9a9; } </style> <script> function updateIframe(){ var myFrame = $("#myframe").contents().find('body'); var textareaValue = $("textarea").val(); myFrame.html(textareaValue); } </script> </head> <body> <textarea rows="5" cols="50" placeholder="Type HTML or text here..."></textarea> <button type="button" onclick="updateIframe()">Insert Content</button> <iframe id="myframe"></iframe> </body> </html>