I had a problem in IE 6 when trying to insert a table using W3C DOM
techniques.
I found a solution and share it. :)
Initially I had......
*************** *******
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>insertTa bleInIE</title>
<script type="text/javascript">
/* <![CDATA[ */
function insertTable() {
var table = document.create Element("table" );
table.setAttrib ute("id","table 2");
var tr = document.create Element("tr");
var td = document.create Element("td");
td.appendChild( document.create TextNode("Some stuff in the cell"));
tr.appendChild( td);
table.appendChi ld(tr);
document.getEle mentById('outpu t').appendChild (table);
}
/* ]]> */
</script>
</head>
<body>
<div>
<input type="button" id="btnInsertTa ble" name="btnInsert Table"
onclick="insert Table()" value="Insert Table" />
</div>
<div id="output"></div>
</body>
</html>
*************** *************
This would work in firefox 1.5 but not in IE 6.
The solution.... you have to explicitly insert the tr into a tbody element
and then the tbody into the table. So the function now becomes:
function insertTable() {
var table = document.create Element("table" );
table.setAttrib ute("id","table 2");
var tbody = document.create Element("tbody" ); // explicitly create a
tbody
var tr = document.create Element("tr");
var td = document.create Element("td");
td.appendChild( document.create TextNode("Some stuff in the cell"));
tr.appendChild( td);
tbody.appendChi ld(tr); // note this new line.
table.appendChi ld(tbody); // append tbody rather than tr
document.getEle mentById('outpu t').appendChild (table);
}
Hope this saves some else an hour or two.
