将代码存为xxx.xhtml就不能点击Add unit增加一个DIV，是o.innerHTML的问题，但不知道怎么解决才能符合XHTML的规范？


<?xml version="1.0" encoding="UTF-8"?> 
<!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" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </meta> 
<title>Template info </title> 
<link rel="stylesheet" type="text/css" href="style.css"/> 
<style type="text/css"> 
.head{ 
width: 228px; 
background-color: #9793dd; 
height: 20px; 
color: #ffffff; 
font-size: 10pt; 
line-height: 20px; 
} 
.grap{ 
height: 1px; 
width: 228px; 
background-color: #4439aa; 
} 
.templateInputBox{ 
width: 222px; 
} 
#templateInfo{ 
width: 228px; } 
#workFlowType{ 
width: 228px; 
height: 88px; 
} 
#workFlowType td{ 
font-size: 7pt; 
text-align: center; 
cursor: pointer; 
background-color: #f4f1ff; 
width: 57px; 
} 
.wf_table{ 
font-size: 8pt; 
width: 206px; 
z-index: 1000; 
} 
.wf_inputBox{ 
width: 110px; 
} 
.wf_selectBox{ 
width: 78px; 
} 
#foot{ 
margin-top: 5px; 
height: 22px; 
width: 228px; 
background-color: #eaedf1; 
line-height: 22px; 
color: #747e94; 
} 
a,a:link,a:visited{ 
text-decoration: none; 
color: #747e94; 
font-size: 8pt; 
} 
a:hover,a:active{ 
text-decoration: none; 
font-size: 8pt; 
color: #172345; 
} 
</style> </head> 
<body style="background-color: #faf8ff;"> <div id="container" align="center" > 
<div id="body"> 
<table cellpadding="0" cellspacing="0" width="220" border="0" style="margin-top: 5px;"> 
<tr height="6"> 
<td class="dash_tl"> </td> 
<td class="dash_tm"> </td> 
<td class="dash_tr"> </td> 
</tr> 
<tr> 
<td class="dash_l"> </td> 
<td style="width: 218px" align="center"> 
<img src="icon/edit_close.png" align="right" onclick="closeWF(this);" style="padding: 2px;cursor: pointer;"/> 
<table class="wf_table" cellpadding="0" cellspacing="0"> 
<tbody> 
<tr> 
<td>Name </td> <td>Type </td> 
</tr> 
<tr height="30" valign="top"> 
<td> <input type="text" class="wf_inputBox"/> </td> 
<td> <select class="wf_selectBox"> <option>Date </option> </select> </td> 
</tr> 
<tr height="1"> 
<td bgcolor="#d1ceee" colspan="2" width="100%"> </td> 
</tr> 
<tr height="30" > 
<td>Starter </td> 
<td> <select class="wf_selectBox"> <option>Required </option> </select> </td> 
</tr> 
<tr height="1"> 
<td bgcolor="#d1ceee" colspan="2" width="100%"> </td> 
</tr> 
<tr height="30" > 
<td>Receiver </td> 
<td> <select class="wf_selectBox"> <option>Optional </option> </select> </td> 
</tr> 
</tbody> 
</table> 
</td> 
<td class="dash_r"> </td> 
</tr> 
<tr height="6"> 
<td class="dash_bl"> </td> 
<td class="dash_bm"> </td> 
<td class="dash_br"> </td> 
</tr> 
</table> <table cellpadding="0" cellspacing="0" width="220" border="0" style="margin-top: 5px;"> 
<tr height="6"> 
<td class="dash_tl"> </td> 
<td class="dash_tm"> </td> 
<td class="dash_tr"> </td> 
</tr> 
<tr> 
<td class="dash_l"> </td> 
<td style="width: 218px" align="center"> 
<img src="icon/edit_close.png" align="right" onclick="closeWF(this);" style="padding: 2px;cursor: pointer;"/> 
<table class="wf_table" cellpadding="0" cellspacing="0"> 
<tbody> 
<tr> 
<td>Name </td> <td>Type </td> 
</tr> 
<tr height="30" valign="top"> 
<td> <input type="text" class="wf_inputBox"/> </td> 
<td> <select class="wf_selectBox"> <option>Date </option> </select> </td> 
</tr> 
<tr height="1"> 
<td bgcolor="#d1ceee" colspan="2" width="100%"> </td> 
</tr> 
<tr height="30" > 
<td>Starter </td> 
<td> <select class="wf_selectBox"> <option>Required </option> </select> </td> 
</tr> 
<tr height="1"> 
<td bgcolor="#d1ceee" colspan="2" width="100%"> </td> 
</tr> 
<tr height="30" > 
<td>Receiver </td> 
<td> <select class="wf_selectBox"> <option>Optional </option> </select> </td> 
</tr> 
</tbody> 
</table> 
</td> 
<td class="dash_r"> </td> 
</tr> 
<tr height="6"> 
<td class="dash_bl"> </td> 
<td class="dash_bm"> </td> 
<td class="dash_br"> </td> 
</tr> 
</table> </div> 
<div id="foot"> 
<a href="#" onclick="addWF()">Add Unit </a>&nbsp; |&nbsp; 
<a href="#">Saved </a> 
</div> 
</div> 
<script type="text/javascript"> 
function addWF(){ 
var oDiv = document.createElement("div");
var otext = document.createTextNode('aaa');
oDiv.appendChild(otext);
var o=document.createElement("div"); 
o.appendChild(oDiv);
document.getElementById('body').appendChild(o); 
} function closeWF(obj){ 
var ask = window.confirm("Do you want to close this workflow?"); 
if(ask) 
{ 
var odiv = obj.parentNode.parentNode.parentNode; 
    odiv.parentNode.removeChild(odiv); 
} 
} 
</script> 
</body> 
</html>