jQuery make variable out of element before appending to DOM

Question

Trying to get efficient here. How can I store an element as a variable before appending it to the DOM? Seems like it's a waste to create it, append it, then go find it again to make a variable.

My method is below. OBV it's saving the string as a variable, not the object, but you get the idea.

Any magic for me or do I have to make two trips?

var $rGallery = '<section id="rGallery" />';

$bin.before($rGallery);

console.log($rGallery);

Answer 1

.before() and .append() can take a jQuery object as a parameter. You just have to create your new object, store it in a variable and then pass it to .before() or .append().

Quick example:

​<div id="bin"> </div> ​​​​​​​​​​​​​​​​​​​​

var newElement;

$(document).ready(function() {

   newElement = $("<button>New button</button>");
   $("#bin").append(newElement);

   alert(newElement.text());
});​

Answer 2

Not sure exactly what you're trying to do here but if you want to save the result of a jQuery selector, you'd do it just like you would any other variable:

var gallery = $("#rGallery");

If you want to create a new element and save it:

var gallery = document.createElement("section");
// Do other stuff on it, like set attributes, etc.