IE9 throws DOM Exception: INVALID_CHARACTER_ERR (5)

Question

On the script below, IE9 is throwing an error:

SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5) mootools-1.2.1-core-yc.js, line 118 character 1

Document.implement({
    newElement: function (A, B) {
        if (Browser.Engine.trident && B) {
            ["name", "type", "checked"].each(function (C) {
                if (!B[C]) {
                    return;
                }
                A += " " + C + '="' + B[C] + '"';
                if (C != "checked") {
                    delete B[C];
                }
            });
            A = "<" + A + ">";
        }
        return $.element(this.createElement(A)).set(B); //THIS IS LINE 118
    },
    newTextNode: function (A) {
        return this.createTextNode(A);
    },
    getDocument: function () {
        return this;
    },
    getWindow: function () {
        return this.window;
    }
});

This snippet is part of the Mootools js library that the developer used on the site. Is there a workaround to fix the error for IE?

Precaution

check my update to my answer, i think you just need to update the mootools script to 1.2.5 or higher (you're using 1.2.1) – Omeara

Answer 1

yeah that code is garbage, you should never do browser checks like that, its taught in JavaScript 101... lol can't believe that's in mootools? blech, anyways

IE9 doesn't allow for crazy document.createElement('<div style="background:red">yay!</div>'); syntax anymore (no one should've ever really been using it in the first place...)

here's an example:

var d = document;
var x = d.createElement('div');

x.innerHTML = 'yay';
x.style.backgroundColor = 'red';
x.style.padding = '6px';
x.style.margin = '20px';

d.body.appendChild(x);

var sameHTML = '<div style="background:green;padding:6px;margin:20px;">yay!</div>';

// fails in IE > 8 and other browsers
try {
  var y = d.createElement(sameHTML);
  d.body.appendChild(y);
} catch (err) {
  d.body.appendChild(d.createTextNode(err)); 
}

// quick fix using innerHTML:
var temp = d.createElement('div');
temp.innerHTML = sameHTML;
d.body.appendChild(temp.childNodes[0]);

the way to fix this is to either create a dummy element and use .innerHTML and then extract the child, or inside mootools check the browser version and don't do that for IE > 8 if i remember right mootools has a Browser.Engine.version or something to that effect...

edit: i feel like i should also add that this: Browser.Engine.trident is the problematic check, and from the gyst of the code looks like it might occur else where too...

aha! another update: i found this while looking through [an old] support thread:

you'll need to update to 1.2.5 or 1.3. Previous MooTools versions are not supported by IE9.

so an update to the script should fix your problem, hopefully it won't introduce more bugs... you can get it here: http://mootools.net/download, you might want to try that 1.2.5 version at the top of the page since it will have the least amount of changes...

good luck -ck

Omeara