A problem that needs to be paid attention to when creatingElement in IE_javascript skills

The code is as follows:

Copy code The code is as follows:

var $alertPanel = $( document.createElement ("div") );
$alertPanel.css("width","120px").css("height","50px").text("Hello CssRain!");
$(' body',parent.document).append($alertPanel);

Following his instructions, I also wrote a demo and found that this is indeed the case.
I looked through the information and didn’t see any similar problems.
Then I wrote it once using the native DOM method, but found that it didn’t work either, just the same.

Copy code The code is as follows:

var div = document.createElement("div");
div.style.width = "120px";
div.style.height = "50px";
div.style.border = "solid 1px #000000";
div.innerHTML = " Hello CssRain!";
parent.document.body.appendChild(div);

So I thought that since appendChild requires parent.document, does it also require parent.document.createElement when creating it? ?
So change the code to:

Copy the code The code is as follows:

var div = parent.document.createElement("div");
div.style.width = "120px";
div.style.height = "50px";
div.style.border = "solid 1px # 000000";
div.innerHTML = "Hello CssRain!";
parent.document.body.appendChild(div);

This is successful, IE6 and IE7 can be used.
Look at the example:
Demo address:http://demo.jb51.net/js/IE-createElement/page1.htm
Summary:

If you If you want to create a parent page element in IE6 or IE7, then you must make the created element belong to the parent page.

Copy code The code is as follows:

var dummy = parent.document.createElement("div" );
var t = parent.document.createElement("table");

In Firefox, IE8, it allows creation in one document to be appended to another document elements.
So in Firefox and IE8, you can use parent.document or document.

In addition, Google Chrome is very weird and messy. If you want to be compatible with Google browser, it is recommended to change your thinking, such as directly using parent.function name() to adjust the parent page.