Multiple-appending a made-up element fails in IE < 9

by secretgspot

HTML

<div class="single multiple"></div>
<div class="multiple"></div>
<div class="multiple"></div>
<div class="multiple"></div>

CSS

div {
    border: 1px solid #000;
    padding: 0.5em 0.5em 0;
    margin-bottom: 1em;
}

madeup {
    display: block;
    color: #fff;
    background: #0a0;
    padding: 0.5em;
    margin-bottom: 0.5em;
}

JavaScript

// This appears to do nothing.
document.createElement('madeup');

// Single append.
$("<madeup/>", {
    html: 'single append (works everywhere)'
}).appendTo(".single");

// Multiple append, no inline styles.
$("<madeup/>", {
    html: 'multiple append (non-inline styles fail in all but the first appended element in IE < 9)'
}).appendTo(".multiple");

// Multiple append, inline styles.
$("<madeup/>", {
    html: 'multiple append (inline styles work)',
    css: {
        display: 'block',
        color: '#fff',
        background: '#0a0',
        padding: '0.5em',
        marginBottom: '0.5em'
    }
}).appendTo(".multiple");