sysel 0 Light Poster

I found a principal differece between the behavior of staticaly (HTML) coded object – the table row, and the same object created dynamicaly (DOM) with createElement() addChild() methodes.

The folowing souce creates one HTML row and one DOM row and gives buttons to duplicate each row.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><META http-equiv="content-type" content="text/html; charset=UTF-8">
<TITLE> HTML vs. DOM </TITLE>
<script>
function start()
{ var oRow    = document.createElement('tr');
      oRow.id = 'DOM';
  var oCell  = document.createElement('td');
      oCell.innerHTML = 'DOM'
  oRow.appendChild(oCell);

  var oCell = document.createElement('td');
  var oButt  = document.createElement('input');
      oButt.type = 'button';
      oButt.value = 'click';
      oButt.onclick = function (){clickFce(this);};
  oCell.appendChild(oButt);
  oRow.appendChild(oCell);

  var oCell = document.createElement('td');
      oCell.innerHTML = 'sensitive text';
      oCell3.onclick = function (){clickFce(this);};
  oRow.appendChild(oCell);
  document.getElementById('tb').appendChild(oRow);
}
function dup(sID)
{ var oRowOrigin = document.getElementById(sID);
  var oTB        = document.getElementById('tb');
  oTB.replaceChild(oRowOrigin.cloneNode(true ),oTB.insertRow(oRowOrigin.rowIndex+1));
}
function clickFce(something){alert(something.parentNode.nodeName);}
</script>
</HEAD>
<BODY onLoad="start()">

<table>
<tbody id="tb"><tr id="HTML"><td>HTML</td><td><input type="button" 
value="click" onClick="clickFce(this)"></td><td onClick="clickFce(this)">
sensitive text</td></tr></tbody>
</table>

<input type="button" onClick="dup('HTML')" value="HTML">
<input type="button" onClick="dup('DOM')" value="DOM">

</BODY>
</HTML>

The HTML row keeps the registrated function, the DOM one does not.

I still did not find the causal explanation, what is the reason, what difference is in those two definition.

Does anyone get the idea?