IE innerHTML namespace

identifying the little differences between IE's interpretation of innerHTML and appendChild

by thingsinjars

HTML

<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
<doctype html>
    <html>
        <head>
            <charset="utf8">
                <title>jQuery Namespace Test page</title>
            </head>
                <body>
                    <h1 id="qunit-header">QUnit example</h1>
                    <h2 id="qunit-banner"></h2>
                    <div id="qunit-testrunner-toolbar"></div>
                    <h2 id="qunit-userAgent"></h2>
                    <ol id="qunit-tests"></ol>
                    <div id="qunit-fixture">test markup, will be hidden</div>
                </body>
            </html>

JavaScript

module("Known elements (span)");
 test("Compare elements without namespace", function() {
  var div1, div2;
  
  div1 = document.createElement('div');
  div1.innerHTML = '<span></span>';
  
  div2 = document.createElement('div');
  div2.appendChild(document.createElement('span'));
  
  equals(div1.innerHTML.toLowerCase(), div2.innerHTML.toLowerCase(), "We expect these to match");
 });
 
 test("Compare elements with namespace", function() {
  var div1, div2;
  
  div1 = document.createElement('div');
  div1.innerHTML = '<u:span></u:span>';
  
  div2 = document.createElement('div');
  div2.appendChild(document.createElement('u:span'));
  
  equals(div1.innerHTML.toLowerCase(), div2.innerHTML.toLowerCase(), "We expect these to match");
 });
 

module("Unknown elements (spud)");
 test("Compare elements without namespace", function() {
  var div1, div2;
  
  div1 = document.createElement('div');
  div1.innerHTML = 'div<div>' + '<spud></spud>' + '</div>';
  div1 = div1.lastChild;
  
  div2 = document.createElement('div');
  div2.appendChild(document.createElement('spud'));
  
  equals(div1.innerHTML.toLowerCase(), div2.innerHTML.toLowerCase(), "We expect these to match");
 });
 test("Compare elements with namespace", function() {
  var div1, div2;
  
  div1 = document.createElement('div');
  div1.innerHTML = 'div<div>' + '<u:spud></u:spud>' + '</div>';
  div1 = div1.lastChild;
  
  div2 = document.createElement('div');
  div2.appendChild(document.createElement('u:spud'));
  
  equals(div1.innerHTML.toLowerCase(), div2.innerHTML.toLowerCase(), "We expect these to match");
 });