one document.createElement, append it twice, only shows once
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!
Solution 1:
You can use .clone()
, like this:
var button_save = $("<button />");
$("#compteurs").append(button_save);
[...]
$("#compteurs").append(button_save.clone());
Solution 2:
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.