xhtml Getting started with xhtml Adding XML to an XHTML Application and Retrieving XML from an XHTML Application
Example
Using XHTML you should avoid methods such as document.write and innerHTML as they treat XML as text and do not properly serialize code; an id attribute in HTML is essentially dumped in to the DOM and the id attribute is not serialized which means when trying to reference to it with something such as document.getElementById('example') the browser will not "see" the id. The following examples get "get" XHTML code from and "set" XHTML code to the XHTML application.
Adding XHTML to and Retrieving XML from the DOM
<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
// Client header isset` and explicitly declares XHTML parser support.
header('Content-Type: application/xhtml+xml; charset=UTF-8');
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
echo '<!DOCTYPE html>'."\n";
echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'."\n";
}
else
{
//Some browsers do not declare support, IE9 shamelessly uses `*/*` in example.
echo '<!DOCTYPE html>'."\n";
echo '<html>'."\n";
}
?>
<head>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
</style>
<script type="application/javascript">
//<![CDATA[
function xml_get(target)
{
return new XMLSerializer().serializeToString(target)
}
function xml_set(xml,position,target)
{
if (typeof target=='string' && document.getElementById(target)) {target = document.getElementById(target);}
if (!target) {alert('Error: target element was not found in the DOM.');}
else if (position=='after')
{
if (target.nextSibling && target.nextSibling!='[object Text]') {target.insertBefore(xml.getElementsByTagName('*')[0],target.nextSibling);}
else {target.parentNode.appendChild(xml.getElementsByTagName('*')[0]);}
}
else if (position=='before') {target.parentNode.insertBefore(document.importNode(xml.getElementsByTagName('*')[0],true),target);}
else if (position=='inside') {target.appendChild(document.importNode(xml.getElementsByTagName('*')[0],true));}
else if (position=='replace') {target.parentNode.replaceChild(document.importNode(xml.getElementsByTagName('*')[0],true),target);}
else {alert('Error: unknown position to import data to: '+position+'.');}
}
window.onload = function(event)
{
var xml_after = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>after</em> the h1[0] element!</p>','application/xml');
var xml_before = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>before</em> the h1[0] element!</p>','application/xml');
var xml_inside = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>inside</em> inside the element with the id <code>example</code>!</p>','application/xml');
var xml_replace = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>replace</em> example!</p>','application/xml');
xml_set(xml_after,'after',document.getElementsByTagName('h1')[0]);
xml_set(xml_before,'before',document.getElementsByTagName('h1')[0]);
xml_set(xml_inside,'inside','example');
xml_set(xml_replace,'replace','example_replace');
alert(xml_get(document));
}
//]]>
</script>
</head>
<body>
<h1><span>XHTML and JavaScript Simple Demonstration</span></h1>
<div id="example"></div>
<div id="example_replace"></div>
</body>
</html>
