I'm trying to add FB xmlns attribute to the document's <html> tag (<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">) dynamically. For some reason adding it like below does not work:
htmltag = document.getElementsByTagName ('html');
htmltag[0].setAttribute("xmlns:fb","http://www.facebook.com/2008/fbml");");
How can I do it?
Thanks!
Update: No jquery or other lib is available.
Heh actually, after doing the jquery solution I stated above;
I realized it could be done easier with a single javascript line:
document.documentElement.setAttribute("xmlns:fb", "http://www.facebook.com/2008/fbml");
Keep in mind ... If you view the source with the browser, you will not see the attribute attached, as it programatically adds it after the page loads. Use Firebug in firefox, or something that lets you see the source being manipulated on the fly, and you should be good to go.
This probably isn't the answer you're wanting :)
Tacking on semantic markup with client-side code is not good practice. It hides the valuable machine-readable info from most machines. The HTML is already fetched, parsed and displayed by the time Javascript executes*. A dollar short and a day late!
If you can add the attributes on the server, before it is sent to the browser, go for it.
If you have to do it client-side; don't be tempted by a framework like jQuery or whatever. That's a huge overhead for a small task.
*non-scientific tests
This can be done very quickly with jquery.
Include:
(or point to a local jquery library)
and here's the code:
<script type="text/javascript">
$(document).ready(function() {
$("html").attr("xmlns:fb", "http://www.facebook.com/2008/fbml");
}); </script>
To get reference to the <html /> element use
document.documentElement
document.getElementsByTagName('html')[0] === document.documentElement evaluates to true.