Here's one that will one day bite you. Consider this code:

<html>
    <head>
        <script type="text/javascript">

            var OnLoad = function() {
                document.getElementById("cloneme").onclick = function() { alert("onload");};
                document.body.appendChild(document.getElementById("cloneme").cloneNode(true));
            }

            window.attachEvent("onload", OnLoad);
        </script>
    </head>
    <body>
        <a id="cloneme" href="javascript:alert('href');">Test Hyperlink</a><br />
        <br />
    </body>
</html>

If you drop it into a local .html file and point a browser at it, both links will look pretty much identical. There is a catch, however: although one hyperlink is a direct clone of the other, they're not identical.

If you click the first one, you'll see the order in which the events should fire represented by two alert boxes, the first one shouting "onload" and the second "href".

If you click the second one, you'll only see the "href" message.

Why is this?

The key point to remember is that the DOM object is being cloned from its textual representation. In other words, .clone() does not do a deep copy; rather, it effectively just creates a new node based on the .outerHtml property of the old node. Notably, that does not include any event handlers that have been attached programmatically.