Tuesday, December 2, 2014

DOM compatibility & fallbacks

DOM compatibility is somewhat a headache for front-end developers when it comes to creating cross-browser support webapps.
I'm writing this small note to self ;) , on a fall-back hack which we can use to overcome this headache.


I'm taking innerText & textContent properties to explain this further,


This image[Screen-shot from 1] depicts browser support for innerText & textContent properties.

In order to support this we can use something like following,
//create div element
var div = document.createElement('div');
//check textContent support
if (div.textContent) { 

     div.textContent = "textContent support exists.";
// go for the fall-back
} else if (div.innerText) { 

     div.innerText = "No textContent support."; 
}
So with this we don't need to worry about setting content to our div.

[1] http://www.quirksmode.org/dom/html/

No comments:

Post a Comment