Append Within Append, Iframe Within Append In Jquery

I've looked at Insert content into iFrame and their fiddle at http://jsfiddle.net/8VP4y/3/ to come out with the following codes which i'm having problem. i've created a jsfiddle f

Solution 1:

No, it's not a bug.

Updated jsfiddle

The right way is:

$(function () {
  $('#card2').html('<iframe id="myFrame"></iframe>');

  // add the src attribute so that the load event will take place in every browser..
  $("#myFrame").attr('src', 'about:blank');

  // wait for the iframe is loaded
  $("#myFrame").on('load', function(e) {
    var myFrame = $("#myFrame").contents().find('body');
    myFrame.append('<p>11111111OH NO TOKEN IS FOR myFrame Original</p>');
  });



  var myFrame2 = $("#myFrame2").contents().find('body');
  myFrame2.append('<p>2222222222  OH NO TOKEN IS FOR myFrame 2</p>');
});

<scriptsrc="https://code.jquery.com/jquery-1.12.1.min.js"></script><divid='card2'></div><iframeid='myFrame2'></iframe>