Jump to content

XHTML output using DOM


Spaceman-Spiff

Recommended Posts

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...

Link to comment
Share on other sites

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");

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.