JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=8"/>
        <title>Testing Element Creation</title>
    </head>
    <body>
        <p>
            As described in the answers to 
            <a href="http://stackoverflow.com/questions/5344029/invalid-character-dom-exception-in-ie9">this question</a>
            on StackOverflow, IE9 now follows the DOM Level 1 Standard
            for <code>createElement</code>. Unfortunately this breaks
            code that worked in older versions of IE. This test verifies
            that setting <code>X-UA-Compatible</code> to force IE9 to
            use the IE8 browser mode does not change that situation.
        </p>
        <ul>
            <li>
                <a href="#" id="test-0">Non-standard createElement</a> (Works in IE 6, 7 & 8, but not 9)
            </li>
            <li>
                <a href="#" id="test-1">Standard createElement</a>
            </li>
            <li>
                <a href="#" id="test-2">YUI 3-based createElement</a>
            </li>
        </ul>     
    </body>
</html>

CSS

div {
    margin: 8px;
    padding: 8px;
}

.Foo {
   border: 1px solid red;
}

JavaScript

YUI().use('node', 'event', 'substitute', function(Y) {
    var n = 0;
    
    Y.on('click', function(e) {
        var el = document.createElement(Y.substitute('<div id="el-{n}" class="Foo"/>', { n: n++ }));
        
        document.documentElement.appendChild(el);
        e.preventDefault();
    }, '#test-0');

    Y.on('click', function(e) {
        var el = document.createElement('div');
        
        el.setAttribute('id', '' + (n++));
        el.setAttribute('class', 'Foo');
        
        document.documentElement.appendChild(el);
        e.preventDefault();
    }, '#test-1');
    
    Y.on('click', function(e) {
        Y.one(Y.config.doc.documentElement).append(Y.substitute('<div id="el-{n}" class="Foo"/>', { n: n++ }));
        e.preventDefault();
    }, '#test-2');
});