Spaceman-Spiff Posted June 4, 2008 Share Posted June 4, 2008 Is it possible to use DOM to output XHTML (instead of HTML)? Example: formfield = document.createElement("input"); formfield.setAttribute("size", "4"); formfield.setAttribute("name", "text1"); formfield.setAttribute("id", "text1"); formfield.setAttribute("type", "text"); Will output: <input id="text1" name="text1" size="4" type="text"> Prefered output: <input id="text1" name="text1" size="4" type="text" /> It's trivial, but just curious... Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 4, 2008 Share Posted June 4, 2008 what do you mean "will output"? Using DOM methods should produce XHTML compliant code Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted June 4, 2008 Share Posted June 4, 2008 I haven't tried this myself, but try: var formField = createElementNS("http://www.w3.org/1999/xhtml", "input"); formField.setAttribute("size", "4"); formField.setAttribute("name", "text1"); formField.setAttribute("id", "text1"); formField.setAttribute("type", "text"); Quote Link to comment Share on other sites More sharing options...
Spaceman-Spiff Posted June 4, 2008 Author Share Posted June 4, 2008 what do you mean "will output"? Using DOM methods should produce XHTML compliant code The page itself (html) is still xhtml compliant if you code it so. However, the generated (on-the-fly) elements that are created via JavaScript, are not XHTML compliant. Try this code for example: var newdiv = document.createElement('div'); inputbox = document.createElement("input"); inputbox.setAttribute("id", "text1"); inputbox.setAttribute("name", "text1"); inputbox.setAttribute("size", "4"); inputbox.setAttribute("type", "checkbox"); newdiv.appendChild(inputbox); alert(newdiv.innerHTML); The output in FF 2.0: <input size="4" name="text1" id="text1" type="checkbox"> Output in IE 7: <INPUT id=text1 type=checkbox size=4> (a lot uglier) PS: This is just a trivial matter, as the page itself will still be xhtml compliant. However, I'm just curious if such result can be obtained. PPS: createElementNS() does the same thing. Quote Link to comment Share on other sites More sharing options...
haku Posted June 5, 2008 Share Posted June 5, 2008 I've always found that DOM outputs valid code. I regularly check my local code after using DOM functions, so I know this to be the case. I suspect (though am not 100% sure) that the DOM functions follow the doctype that your document has specified. Quote Link to comment Share on other sites More sharing options...
Spaceman-Spiff Posted June 5, 2008 Author Share Posted June 5, 2008 I made a test page: http://opdb.info/dom/dom.html The HTML itself is valid XHTML 1.0 Transitional. The JavaScript is also valid, press F12 to enable Firebug Lite to check. However, when you check the HTML output generated by the JavaScript DOM, it's not XHTML. The output looks even worse in IE. It still looks like HTML 4 valid in Firefox. Again, this is a trivial thing, since the page itself is still valid, but it rouses my curiosity. souce code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DOM Test page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="Stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="firebug/firebug.js"></script> </head><body> <h2>This page is Valid XHTML 1.0 Transitional!</h2><br /> <div id="printhere" class="debugbox"></div><br /> <a href="" onclick="alert(document.getElementById('printhere').innerHTML);">Check above HTML code</a> <script type="text/javascript"> //create checkbox - Method 1: using setAttribute() var inputbox = document.createElement("input"); inputbox.setAttribute("id", "text1"); inputbox.setAttribute("name", "text1"); inputbox.setAttribute("type", "checkbox"); document.getElementById('printhere').appendChild(inputbox); //create image - Method 2: using object properties var image = document.createElement("img"); image.id = "newimage"; image.src = "http://www.w3.org/Icons/w3c_main"; image.alt = "W3C Logo"; document.getElementById('printhere').appendChild(image); </script> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" border="0" /></a> </p> </body></html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.