one document.createElement, append it twice, only shows once

Question

I have a button I want to use in the beginning and the end of the page:

var button_save = document.createElement('button');
$("#compteurs").append(button_save);
[...]
$("#compteurs").append(button_save);

but it only appear at the end of the page. If I remove it from the bottom of the page, it appear at the begining of page. It's a kind of pointer. Is there a way to create the button only once and use it twice? Thanks!

Answer 1

You can't use the same element twice, but you can clone it:

var button_save_1 = document.createElement('button');
var button_save_2 = button_save_1.cloneNode(true);
$("#compteurs").append(button_save_1);
[...]
$("#compteurs").append(button_save_2);

Edit: Just to clarify, cloneNode is a DOM method built into the browser, and the clone method in Nick Craver's answer is a jQuery method.

Answer 2

You can use .clone(), like this:

var button_save = $("<button />");
$("#compteurs").append(button_save);
[...]
$("#compteurs").append(button_save.clone());