How to "enable" HTML5 elements in IE 8 that were inserted by AJAX call?

To enable HTML5 elements in IE 8 that were inserted by AJAX calls, you need to use plugins like html5shiv and manually create elements using document.createElement. The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9.

The Problem

IE 8 doesn't recognize HTML5 elements like <article>, <section>, or <header>. When these elements are inserted via AJAX, they won't render properly even with html5shiv loaded.

Solution: Manual Element Creation

You need to call document.createElement for each HTML5 element before inserting AJAX content:

<script>
// Create HTML5 elements for IE 8 compatibility
function enableHTML5Elements() {
    var elements = ['article', 'section', 'header', 'footer', 'nav', 'aside', 'main'];
    
    for (var i = 0; i < elements.length; i++) {
        document.createElement(elements[i]);
    }
}

// Call before AJAX content insertion
enableHTML5Elements();

// Example AJAX content insertion
var ajaxContent = '<article><header>Title</header><p>Content here</p></article>';
document.getElementById('container').innerHTML = ajaxContent;
</script>

Complete Example with AJAX

<script>
function loadHTML5Content() {
    // Enable HTML5 elements for IE 8
    var html5Elements = ['article', 'section', 'header', 'footer', 'nav'];
    for (var i = 0; i < html5Elements.length; i++) {
        document.createElement(html5Elements[i]);
    }
    
    // Simulate AJAX response
    var htmlContent = '<article>' +
                     '<header>Article Title</header>' +
                     '<section>Article content goes here</section>' +
                     '<footer>Article footer</footer>' +
                     '</article>';
    
    document.getElementById('content').innerHTML = htmlContent;
    console.log('HTML5 content loaded successfully');
}

// Load content when page is ready
window.onload = function() {
    loadHTML5Content();
};
</script>

<div id="content"></div>

Key Points

• Call document.createElement for each HTML5 element before AJAX insertion
• This must be done in IE 8 even with html5shiv loaded
• Create elements once per page load, not for every AJAX call
• Include CSS styling for HTML5 elements: article, section { display: block; }

Conclusion

To enable HTML5 elements inserted via AJAX in IE 8, manually create each element type using document.createElement before inserting the AJAX content. This ensures proper rendering even in legacy browsers.