Home/ Questions/Q 8397559
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T20:49:20+00:00

Given the following code: <!DOCTYPE html> <!– HTML5 –> <html> <head> <meta http-equiv="Expires" content="Fri,

  • 0

Given the following code:

<!DOCTYPE html> <!-- HTML5 -->
<html>
    <head>
        <meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Cache-Control" content="no-cache">
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta http-equiv="content-language" content="en">
        <title>Untitled</title>
        <script type='text/javascript'>
            function createTableRow() {
                var tr = document.createElement("tr");
                var strWork = "<tr onmouseover='this.style.cursor=\"pointer\";'";
                strWork += " onmouseout='this.style.cursor=\"auto\";'";
                strWork += " onclick='ShowClick(this);'";
                strWork += " id='TestCell'><td>Test!</td></tr>";
                alert(strWork);
                tr.outerHTML = strWork;
                return tr;
            }

            function BuildTable() {
                var table = document.createElement("table");
                table.appendChild(createTableRow());
                return table;
            }

            function ShowClick(obj) {
                alert(obj.id);
            }
        </script>
    </head>
    <body onload='alert(BuildTable().outerHTML);'>
    &nbsp;
    </body>
</html>

The first "alert" dialog shows the tag as I want it to be formed, however, the "onload=alert" line returns the result "<table><tr></tr></table>".

What am I doing wrong? Why aren’t these events binding to the TR tag?

Also, I’d like to add that I originally assigned the events using JavaScript i.e.:

tr.onclick = function() { ShowClick(this); };

But had the exact same result…

I really don’t get it, and I can’t find any discussion about the problem anywhere… any help would be greatly appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code throws a NO_MODIFICATION_ALLOWED_ERR in the JavaScript console. The W3C spec has this to say:

    [element.outerHTML] throws a NO_MODIFICATION_ALLOWED_ERR exception if the parent of the element is the Document node.

    The same thing happens in your code. You’re setting the tr‘s outerHTML before you’ve appended it to another Node (e.g. the table). That’s why its outerHTML can’t be changed.

    The easiest solution is not to use outerHTML. Try your original approach:

    function createTableRow() {
  var tr = document.createElement('tr');
  tr.onmouseover = function() {
    this.style.cursor = 'pointer';
  };
  tr.onmouseout = function() {
    this.style.cursor = 'auto';
  };
  tr.onclick = function() {
    ShowClick(this);
  };
  tr.id = 'TestCell';
  tr.innerHTML = '<td>Test!</td>';
  return tr;
}

    Note that when you alert (or console.log) the table‘s outerHTML, you’ll see something like this:

    <table><tr id="TestCell"><td>Test!</td></tr></table>

    But don’t let that fool you. The event handlers don’t show up, but that’s because they are attached directly to the DOM node, thus bypassing the HTML. Rest assured that they work perfectly.

    To see for yourself, try this live demo: jsbin.com/oterit/1/edit

    • 0