How to insert HTML content into an iFrame using jQuery?

<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
    textarea,
    iframe {
        display: block;
        margin: 10px 0;
    }
    
    iframe {
        width: 500px;
        border: 1px solid #000000;
    }
</style>
<h1 style="color:green;">
    GeeksforGeeks
</h1>
<h3>
    How to insert HTML content into an iFrame using jQuery
</h3>
<textarea rows="2" cols="40" style="text-align:center;">
        GEEKSFORGEEKS - A computer science portal for geeks.
    </textarea>
<button type="button" onclick="updateIframe()">
    Click to Insert
</button>
<iframe style="text-align:center;" id="myframe"></iframe>
<script type="text/javascript">
    function updateIframe() {
        var myFrame = $("#myframe").contents().find('body');
        var textareaValue = $("textarea").val();
        myFrame.html(textareaValue);
    }
</script>

<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
    iframe {
        width: 500px;
        border: 1px solid #000000;
    }
</style>
<h1 style="color:green;">
    GeeksForGeeks
</h1>
<h3>How to insert HTML content
    into an iFrame using jQuery</h3>

<h4>Text to be insert : "GEEKSFORGEEKS
    - A computer science portal for geeks."</h4>
<iframe style="text-align:center;" id="iframe">
</iframe>
<script>
    $("#iframe").ready(function() {
        var body = $("#iframe").contents().find("body");
        body.append(
        'GEEKSFORGEEKS - A computer science portal for geeks.');
    });
</script>