JSFiddle - React, Tailwind, and code Playground

by krofdrakula

HTML

<article>
    <script type="text/html" class="template">
        <div>Some content</div>
    </script>
</article>
<script type="text/html" class="another">
    <div>Other content</div>
</script>

JavaScript

document.createElement('article');

String.prototype.htmlEntitize = function() {
    return this.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
};

$(function() {
// works as expected in Chrome
$('body').append('<p>' + $('script.template').html().htmlEntitize() + '</p>');

// should work, but returns no children in IE
try {
    $('body').append('<p>' + $('article').children().html().htmlEntitize() + '</p>');
} catch(ex) {
    $('body').append('<p style="color:red">' + ex.message + '</p>');
}

// find returns null
try {
    $('body').append('<p>' + $('article').find('script.template').html().htmlEntitize() + '</p>');
} catch(ex) {
    $('body').append('<p style="color:red">' + ex.message + '</p>');
}

// works fine
$('body').append('<p>' + $('body').find('script.another').html().htmlEntitize() + '</p>');

});