One document.createElement, add it twice, displayed only once

Question

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

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

but it only appears at the end of the page. If I remove it from the bottom of the page, it will appear at the top of the page. This is a kind of pointer. Is there a way to create a button only once and use it twice? Thank!

Answer 1

You can use .clone(), for example:

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

Answer 2

You cannot 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);

: , cloneNode - DOM, , clone Nick Craver - jQuery.