JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery.append() test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
    div#appendWrapper { width: 600px; height: 600px; border: 0; }
    div { padding: 15px; margin: 15px; width: 70%; height: 70%; border-width: 5px; border-style: solid; }
    #border-black { border-color: black; }
    #border-red { border-color: red; }
    #border-blue { border-color: blue; }
    #border-grey { border-color: #aaa; }
</style>
<script type="text/javascript">
    jQuery(function(){
        var htmlData = '<div id="border-black"><h3>This should have black border<div id="border-red">This should have red border<div id="border-blue">This should have blue border</div></div></div>This is a lonely text node<div id="border-grey">This should have grey border</div>';
        jQuery(htmlData).appendTo('body');
        jQuery('<hr/>').appendTo('body');
        jQuery('body')[0].innerHTML += htmlData;
    });
</script>
</head>
<body>
<p>There are two ways of inserting a simple structure into the document: 1) jQuery.appendTo() and 2) .innerHTML += "";
<p>Open this page in a modern browser and then in Internet Explorer 7 and see the difference. There shouldn't be any, since it's all simple procedure done in jQuery.</p>
<p>In IE7 the jQuery method fails and the innerHTML works quite well, even though the inserted HTML has an error (the H3 tag does not end).</p>
</body>
</html>