Javascript appendChild 不在 DOM 中反映

Question

I have a requirement to insert an image tag inside an iframe. When I debug the code I can see the added html in the object. But it does not show up in the DOM nor can I see it on the page This is a snippet for reference.

var tdForImage = iframewindow.document.getElementsByTagName("table")[1].getElementsByTagName('tr')[0].getElementsByTagName('td')[0];
var imgTag = document.createElement("img");

//copying img src value from elsewhere
imgTag.src = iframewindow.document.getElementsByTagName("img")[0].src;

//Remove the wrongly placed second image.
iframewindow.document.getElementsByTagName("img")[0].parentNode.removeChild(iframewindow.document.getElementsByTagName("img")[0]);
tdForImage.appendChild(imgTag);

After this I can see that there is no change in the UI. The iframe is BLANK. In its document there is nothing in the head nor in the body. While debugging, I can see img inside innerHTML attr in tdForImage. Why does the iframe get cleared? If anyone has some experience of such issues please advise..

EDIT 1 >> I have noticed that on IE 11, the script added to the iframes head tag is not loaded when the page is loaded for the first time. This seems to be the root cause of the issue. I have already tried adding a 2 second timeout. I have already tried loading the script containing function as innerHTML. Both are not working. If anyone knows a way to force IE to load the scripts immediately after the appendChild call please let me know..

Answer 1

It works for me on JSFiddle:

<iframe id="frame" src="about:blank"></iframe>

// Fill iframe for demo
document.getElementById('frame').contentWindow.document.write('<table><tr><td>fdsafdsa</td></tr></table><img src="https://placekitten.com/200/300" />');

var iframe = document.getElementById('frame');

var iframewindow = iframe.contentDocument || iframe.contentDocument.document;
console.log(iframewindow.toString());

var tdForImage = iframewindow.getElementsByTagName("table")[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[0];
var imgTag = document.createElement("img");

imgTag.src = iframewindow.getElementsByTagName("img")[0].src;
iframewindow.getElementsByTagName("img")[0].parentNode.removeChild(iframewindow.getElementsByTagName("img")[0]);

tdForImage.appendChild(imgTag);

https://jsfiddle.net/r6o83gL5/12/

But if your iframe is on a different domain, you will not be allowed to access it's body.