Convert innerHTML to XHTML format using Javascript

Convert innerHTML to XHTML
Hi Friends,
this is an XHTML reference and I use Javascript here to make a sample HTML XHTML converter. What I have tried is making a simple xhtml parser, and I achieved the results. This html to xhtml converter takes in the InnerHTML and reference to an XML object to generate an XML document in XHTML format.

It is done by using JavaScript.
Normally, when you do an innerHTML of a table or a div of an element in Javascript, the output is not in XHTML format…

For eg:

<Table id=Tbl5 contentEditable=true cellSpacing=1 cellPadding=1>

You can see that it is not in a pure XHTML format according to xhtml w3c.

If it to be in a pure XHTML format according to xhtml w3c standards,

It has to be

<TABLE id=”Tbl5” contentEditable=”true” cellSpacing=”1” cellPadding=”1”/>

It so happens that you will not be able to get an end tag for <INPUT> controls when you do a direct innerHTML.

For all these problems, I have found made javascript function to cater these needs…..

It is as follows.

Convert html to xhtml

For html to xhtml conversion, you will have to pass in 2 variables...

1. The innerHtml of the Div or table that is to be converted to XHTML or XML. here it is DivForXML

2. The Reference to an empty XML element. Here it is "parent"


var DivForXML = document.getElementById("the Element");
var XMLDom = new ActiveXObject("msxml2.domdocument");
XMLDom.async = "false";
_GetXSL(DivForXML, XMLDom);
alert(XMLDom.xml);


function _GetXHTML(DivForXML, parent) {

var XSL = new ActiveXObject("msxml2.domdocument");

XSL.async = "false";

var AllChild = DivForXML.childNodes;

var ChdXMLElem;

for (var CurElem = 0; CurElem <>

if (AllChild[CurElem].nodeType == 3) {

ChdXMLElem = parent.ownerDocument.createTextNode(AllChild[CurElem].nodeValue);

// To some browsers such as Firefox, a blank space is considered a text node (nodeType=3) just like regular text

}

else {

ChdXMLElem = parent.ownerDocument.createElement(AllChild[CurElem].tagName);

for (var attr = 0; attr <>

var attrib = AllChild[CurElem].attributes[attr];

if (attrib.specified == true) {

//Following code is used to avoid contentEditable and style attributes.

if (attrib.name.toLowerCase() != "contenteditable" || attrib.name.toLowerCase() != "style") ChdXMLElem.setAttribute(attrib.name, attrib.value);

}

}

}

if (AllChild[CurElem].childNodes.length > 0) {

_GetXHTML(AllChild[CurElem], ChdXMLElem);

}

parent.appendChild(ChdXMLElem);

}

}


The output you get will be in XHTML format. The same method and a little of extra brainstorming can be used to make more complex parsers…Hope this html xhtml parser has helped you out

If you have some doubts regarding this XHTML reference or wants to correct me on the xhtml parser, New ideas on html to xhtml conversion are most welcome..please add comments….