How do I override javascript's cloneNode?

Go To


This is what I have so far:

This is how I'm trying to override the default cloneNode: Object.defineProperty(Object.prototype, "cloneNode", { get: cloneNode2, set: cloneNode2 });

but it's not working, so, I think Object.prototype doesn't have cloneNode, but Element.prototype doesn't either.

So, which class do I need to use to override cloneNode, assuming my method is correct?

2012-04-03 21:29
by NullVoxPopuli
function cloneNode() { [native code] } (in Chrome, at least) so I don't think you can really override it - Matt Ball 2012-04-03 21:32
Well, I just need to override in Firefox, because cloneNode by default changes the color format in the style attribute to rgb from hex... which makes the clone not an exact copy - NullVoxPopuli 2012-04-03 21:42
It's still native code in FF - Matt Ball 2012-04-03 21:45
well.. taht's... sad = - NullVoxPopuli 2012-04-03 21:51


This series of fiddles is a work in progress, but it reimplements cloneNode's functionality.

as of April 4th, 10:53am EST, it needs to work with IE, as IE doesn't have a Node object.

Note, that in IE, prototype functions can't be overridden. So, all instances of cloneNode have to be replaced by a function that determines which version of cloneNode to use.

2012-04-04 14:53
by NullVoxPopuli


Try using:

Node.prototype.cloneNode = cloneNode2;

Object.defineProperty is not used for this purpose. Here's an example of a use for it:

var o = {};
Object.defineProperty(o, 'blah', {
    'get': function () { return 'asdf'; },
    'set': function (x) { alert(x); }

alert(o.blah); // alerts 'asdf'
o.blah = 'fdsa'; // alerts 'fdsa'

Apparently, this only works in Chrome.

To solve the actual problem, it should be simple enough to just replace the RGB codes with its equivalent hex code.

function decToHex(a) {
    return ('00' + (+a).toString(16)).substr(-2);
function replaceRGB(str) {
    return str.replace(/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/, function (_, r, g, b) {
        return "#" + decToHex(r) + decToHex(g) + decToHex(b);
replaceRGB("color: rgb(255, 0, 0)") // "color: #ff0000"
2012-04-03 21:35
by Casey Chu doesn't work - NullVoxPopuli 2012-04-03 21:39
What do you expect it to do? If you add an alert to cloneNode2, it indicates it's using cloneNode2 and not the native one (edit: in Chrome, at least - Casey Chu 2012-04-03 21:42
Thought this technically works, it should be done on Node.prototype where it's actually defined. It wouldn't work if you had an instance of a Node that is not an Element (like a text node - Juan Mendes 2012-04-03 21:45
can you modify the fiddle, I can't get it to work. = - NullVoxPopuli 2012-04-03 21:48
Ooops, Even though the doc says it's defined on Node, The browser seems to think it is defined on Element @TheLindyHop I'm pretty sure we determined it can't be don - Juan Mendes 2012-04-03 21:56


It's a property of Node.prototype

Node.prototype.cloneNode = function() {}

However, modifying built in objects may give you grief in the future. If possible, you should create a different function and use that instead, that way, existing code that uses cloneNode won't break.

2012-04-03 21:39
by Juan Mendes
this didn't work: - NullVoxPopuli 2012-04-03 21:41
@TheLindyHop Which browser? It works for me in Chrome. I knew it wouldn't work in IE. I believe Chrome is the only browser that lets you modify it - Juan Mendes 2012-04-03 21:43
oh, Firefox. I don't need to override in the other browsers, because cloneNode in FF is broken - NullVoxPopuli 2012-04-03 21:44
That means it can't be done :( Btw, your clone node function doesn't properly set any attributes on the node itself, that is if your div contains any attributes, it won't be copied to the cloned nod - Juan Mendes 2012-04-03 21:47
fixed @Juan Mende - NullVoxPopuli 2012-04-03 22:07
@TheLindyHop I think outerHTML doesn't work in Firefox. The fiddle doesn't work in my version, though it is a very old version (3.6), it may work in newer version - Juan Mendes 2012-04-03 22:20
it works in FF 1 - NullVoxPopuli 2012-04-03 23:03