alrra/index.html

## index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>Feature detection test for insertAdjacentHTML</title>
    <style>
        .no-js .content,
        .feature .no,
        .no-feature .yes {
            display: none;
        }

        #element {
            background-color: #eee;
        }

        .element {
            border: 1px dotted #000;
            margin: 5px 0;
            padding: 5px;
        }

        .new-element {
            background-color: #8CE038;
        }

    </style>
    <script>
        (function (window) {

            var document = window.document,
                docElement = document.documentElement;

            function addClass(className) {
                docElement.className = docElement.className + ' ' + className;
            }

            docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1js$2');

            if ( 'insertAdjacentHTML' in docElement ) {
                addClass('feature');
            } else {
                addClass('no-feature');
            }

        })(window);
    </script>
</head>
<body>
    <noscript>Please <a href="http://www.enable-javascript.com/" target="_blank">enable JavaScript</a>. Thank You! :D</noscript>
    <div class="content">
        <h1 class="yes">yap, it has support :D</h1>
        <h1 class="no">nope, it doesn't have support :(</h1>
        e.g.:
        <div id="element" class="element">element</div>
    </div>
    <script>
        (function (window) {

            var element = document.getElementById('element');

            try {
                element.insertAdjacentHTML('beforebegin', '<div class="element new-element">beforebegin</div>');
                element.insertAdjacentHTML('afterbegin', '<div class="element new-element">afterbegin</div>');
                element.insertAdjacentHTML('beforeend', '<div class="element new-element">beforeend</div>');
                element.insertAdjacentHTML('afterend', '<div class="element new-element">afterend</div>');
            } catch (e) { }

        })(window);
    </script>
</body>
</html>
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8">
	<title>Feature detection test for insertAdjacentHTML</title>
	<style>
	.no-js .content,
	.feature .no,
	.no-feature .yes {
	display: none;
	}

	#element {
	background-color: #eee;
	}

	.element {
	border: 1px dotted #000;
	margin: 5px 0;
	padding: 5px;
	}

	.new-element {
	background-color: #8CE038;
	}

	</style>
	<script>
	(function (window) {

	var document = window.document,
	docElement = document.documentElement;

	function addClass(className) {
	docElement.className = docElement.className + ' ' + className;
	}

	docElement.className = docElement.className.replace(/(^\|\s)no-js(\s\|$)/, '$1js$2');

	if ( 'insertAdjacentHTML' in docElement ) {
	addClass('feature');
	} else {
	addClass('no-feature');
	}

	})(window);
	</script>
	</head>
	<body>
	<noscript>Please <a href="http://www.enable-javascript.com/" target="_blank">enable JavaScript</a>. Thank You! :D</noscript>
	<div class="content">
	<h1 class="yes">yap, it has support :D</h1>
	<h1 class="no">nope, it doesn't have support :(</h1>
	e.g.:
	<div id="element" class="element">element</div>
	</div>
	<script>
	(function (window) {

	var element = document.getElementById('element');

	try {
	element.insertAdjacentHTML('beforebegin', '<div class="element new-element">beforebegin</div>');
	element.insertAdjacentHTML('afterbegin', '<div class="element new-element">afterbegin</div>');
	element.insertAdjacentHTML('beforeend', '<div class="element new-element">beforeend</div>');
	element.insertAdjacentHTML('afterend', '<div class="element new-element">afterend</div>');
	} catch (e) { }

	})(window);
	</script>
	</body>
	</html>