JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="source">
            <b>Source:</b>
            <div style="padding-bottom: 20px">
                <input type="checkbox" checked="checked">
                (<input type="radio"> unchecked,
                <input type="radio" checked="checked"> checked)
                <input type="text" value="start value">
                <textarea>start value</textarea>
                <select><option>1</option><option selected="selected">selected value</option></select>
            </div>
        </div>
        <div id="target">
            <b>Target (cloned using HTML - fails in IE9):</b>
            <div style="padding-bottom: 20px"></div>
        </div>
        <div id="target-without">
            <b>Target (cloned without HTML):</b>
        </div>
        <p style="padding: 1em">
            Note that in IE9 the target (cloned using HTML) checkbox or radio is not checked, confirming that <a href="http://bugs.jquery.com/ticket/10550">#ticket 10550</a> is in fact a bug, and relates to the html() call after a clone.
        </p>
        <pre>
        </pre>
    </body>
</html>

JavaScript

$(function() {
    var html = $('#source div').clone().html();
    $('#target div').html(html);
    $('#target-without').append($('#source div').clone());
    $('pre').text(html);
});