I found a bug on bestbuy in IE8 and I cannot seem to understand why it occurs. It also occurs in IE8 on sites such as cast and raymourflanigan, but not on google or godaddy.

The following code throws a "Invalid procedure call or argument" error (specifically the last line is what throws the error):

var p = document.createElement("p");
var holder = Element.prototype.appendChild;
holder.apply(document.body, [p]);

This is very strange because I've tried it in other websites in IE8 and it works like a charm. I tried using .call instead of .apply, and even storing a reference to the original appendChild method to another variable on the Element prototype, but both of these attempts threw the same error.

What is causing this?

I found a bug on bestbuy. in IE8 and I cannot seem to understand why it occurs. It also occurs in IE8 on sites such as cast. and raymourflanigan., but not on google. or godaddy..

The following code throws a "Invalid procedure call or argument" error (specifically the last line is what throws the error):

var p = document.createElement("p");
var holder = Element.prototype.appendChild;
holder.apply(document.body, [p]);

This is very strange because I've tried it in other websites in IE8 and it works like a charm. I tried using .call instead of .apply, and even storing a reference to the original appendChild method to another variable on the Element prototype, but both of these attempts threw the same error.

What is causing this?

• javascript
• internet-explorer
• debugging
• internet-explorer-8

• For me this worked on bestbuy website without any issues in the console. Although it's not exactly IE8 but IE8 mode in IE10. – Tomas Kirda Commented May 2, 2013 at 3:38
• @TomasKirda Yeah, try it in IE8 with a VM and let me know if it works. – Justin Meltzer Commented May 2, 2013 at 4:04
• Sorry for skirting the question, but I don't understand why you aren't simply using document.body.appendChild(p); – 1nfiniti Commented May 4, 2013 at 5:56
• @JustinMeltzer: Could you provide more exact URL reference where the problem could be reproduced or provide jsfiddle demo? – Oleg Commented May 4, 2013 at 13:02
• 1 @JustinMeltzer: Testing in JavaScript console can give incorrect results. I remind about an book about JavaScript and another long critic article about some wrong parts of the book. The author of the book wrote some statements about web browsers based on JavaScript console instead of usage of JavaScript program. So there are some wrong information in the book (which is very good in general). What problem you really have and try to solve? Do you need inject some elements on the pages? Do you wrote some browser plugin? Do you able create clean jsfiddle demo which has the same problems? – Oleg Commented May 5, 2013 at 17:17

2 Answers 2

edit

"What kind of code could possibly cause this error?"

It would seem that the error is related to the document.body not being available as a result of the page being in strict mode. The mode is entered at bestbuy as a result of the directive:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

With regards to internet explorer, the option chrome=1 creates a Google Content Frame (GCF) will force the page to operate in strict mode. cast. is in strict mode as a result of its doctype header using XHTML.

There are various ways to enter document modes in IE

The net result of the page being in strict mode is that the rendering surface bees available at document.documentElement. This code will append text and a paragraph at the bottom of the viewing area:

var p = document.createElement("p");
p.innerHTML = "APPEND";
var holder = Element.prototype.appendChild;
holder.apply(document.documentElement, [p]);

I made this fiddle in order to test this behavior: http://jsfiddle/LAkQk/

I first decided to test this behavior in multiple browsers.

Runs without error in chrome, firefox, safari, and IE8.

Note that to test this fiddle (or any really) on ie8 you must use /embedded and then click "result".

So lets just start off with the acknowledgement that there is something on those sites which is causing the conflict.

I was able to repeat the error using IE8 on bestbuy., and to confirm that it did work at google.

However, this is not an issue with apply or appendChild per say. It is specifically an issue with passing the document.body. You may test this yourself with this code at bestbuy.:

(function(){
 var p = document.createElement("p");
 p.innerHTML = "APPEND";
 var holder = Element.prototype.appendChild;
 var d = document.getElementById("header");
 holder.apply(d, [p]);
})()

Perhaps it is because of something attached to the body as a result of one of their plugins. Amusingly, this works from the ie console at bestbuy.

$("body").append('<p>Append!</p>');

I looked through a number of the plugins and cannot find the exact line of code which is causing the overload or conflict, but it must be there, more than likely as a result of sniffing the user agent.

Debugger says "'Element' is undefined" for Travis' code and the only JS exception I receive when I load the page is that 'hasAttribute' is a not supported method. Both happens only when the IE8 loads the page in patibility mode (Document Mode: IE7 Standards), but probably I load a different page from yours: your code uses Element so the exception would be the same as for Travis' code. And here is the answer:

What's IE take on HTMLDocument and HTMLElement

There is no 'Element' in IE7.