Develop Reference

jQuery: easier way to use .clone() than described below?

If you execute in the console on this page
var cloned = $(".question").clone(true);
$(".question").addClass("first");
var clonedStr = cloned[0].outerHTML || new XMLSerializer().serializeToString(cloned[0]);
$(".question").after(clonedStr);
you will clone the question (there will be two questions on the page, but the first one will be with the .first class). That's what is needed.
Is there any simpler way to do this with jQuery? I'm confused of the third string in the code above and believe it could be simpler. Any ideas?
Thank you.

If you don't use the HTML as string, then don't get it. Just use the jQuery object:
var cloned = $(".question").clone(true);
$(".question").addClass("first").after(cloned);
Also, you can do it one line:
$(".question").after($(".question").clone(true)).first().addClass("first");

You could use insertAfter to insert the cloned element after changing the class. You don't need to convert the element in the jQuery object to a string, you can use that object within the function itself:
var $question = $('.question');
var $cloned = $question.clone(true).insertAfter($question);
$question.addClass('first');

jQuery variables objects?

When I use JavaScript it works.
var submitButton = document.getElementById("submitButton");
When I use jQuery to declare it it doesn't.
var submitButton = $('#submitButton');
I realized when debugging, jQuery is creating a object for the variable.
submitButton: Object[span#submitButton.wordButtonD]
In JavaScript
submitButton: span#submitButton.wordButtonD
How do get this to be like javaScript??

I think what you are looking for is: submitButton[0]
Just remember to check the length (greater than 0) because jQuery will return a result even though the element has not been found.

Just use Javascript and the result will be as you want. jQuery create its own object to control :). Or please explain more why do you need the result span#submitButton.wordButtonD but not Object[span#submitButton.wordButtonD]?

statement 1:
var submitButton1 = document.getElementById("submitButton");
statement 2:
var submitButton2 = $('#submitButton');
In above statements, submitButton1 is a DOM object and submitButton2 is a Jquery Object (which already warped your DOM object). Thus, If you want to get Dom object from Jquery object, just do:
var submitButton3 = submitButton2[0]
OR
var submitButton3= submitButton2.get(0)
Now, 2 Dom object submitButton1 and submitButton3 are the same.

how to wrap a html string

Why won't this jquery object of p tags get wrapped by the div. I know the documentation says that it must be a dom element but there has to be a way?
WHY DOES IT ONLY ALERT test1?
http://jsfiddle.net/scwonubb/
var s = '<p>test1</p><p>test2</p><p>test3</p><p>test4</p><p>test5</p><p>test6</p><p>test</p>';
var $d = $(s).wrapAll('<div class="mydiv">');
var final = $d.html();
alert(final);

That is because you variable $d is the jQuery object of your variable s even if you have wrapped it. Try alerting the parent, it will be the div :
var final = $d.parent().html();
Fiddle : http://jsfiddle.net/scwonubb/1/

.html() gets the contents of what you have selected.
Change it to $d.parent().html() and it will work.

Does jQuery use create document fragment inside each loops?

So I've read that jQuery uses document fragments internally to make rendering faster. But I am wondering if anyone knows if jQuery would use createDocumentFragment in this situation where I'm appending img elements to the DOM using the each loop?
var displayArray = []; // Lots of img elements
$.each(displayArray, function()
{
$('#imgSection').append(this);
});
Or would I need to use this code in order to reduce the number of browser reflows?
var displayArray = []; // Lots of img elements
var imgHolder = $('<div/>');
$.each(displayArray, function()
{
imgHolder.append(this);
});
$('#imgSection').append(imgHolder);
Also, the displayArray is populated by other code, not shown here, that creates img elements based off of paths in a JSON file.
Thank you for any advice.

Why all the looping to add elements?
$('#imgSection').append("<div>" + displayArray .join("") + "</div>");
Okay so it is elements.
The quickest way is going to be using append with the array itself.
$("#out").append(elems);
other option using one div to append is
var div = $("<div/>").append(elems);
$("#out").append(div);
BUT appending a lot of images at once is going to be bad unless they are preloaded. That will be a bunch of http requests being queued up.
jsPerf test cases

No, if you use $.each() then jQuery won't use a DocumentFragment - jQuery has no way of knowing what you're going to do inside the loop and each iteration is independent.
The point of the document fragment is that you don't have to wrap all your new elements up in a wrapper element as you've done in your second example to limit the reflows.
jQuery apparently will use a document fragment if you pass an array of elements directly to .append() instead of iterating over them yourself.

If you really care about reflows (and have noticed the displaying to be slow), you can hide and show the image-holding element:
var displayArray = […]; // Lots of img elements
var holder = $('#imgSection').hide();
for (var i=0; i<displayArray.length; i++)
holder.append(displayArray[i]);
holder.show();

Is there a getElementsByTagName() like function for javascript string variables?

I can use the getElementsByTagName() function to get a collection of elements from an element in a web page.
I would like to be able to use a similar function on the contents of a javascript string variable instead of the contents of a DOM element.
How do I do this?
EDIT
I can do this by creating an element on the fly.
var myElement = new Element('div');
myElement.innerHTML = "<strong>hello</strong><em>there</em><strong>hot stuff</strong>";
var emCollection = myElement.getElementsByTagName('em');
alert(emCollection.length); // This gives 1
But creating an element on the fly for the convenience of using the getElementsByTagName() function just doesn't seem right and doesn't work with elements in Internet Explorer.

Injecting the string into DOM, as you have shown, is the easiest, most reliable way to do this. If you operate on a string, you will have to take into account all the possible escaping scenarios that would make something that looks like a tag not actually be a tag.
For example, you could have
<button value="<em>"/>
<button value="</em>"/>
in your markup - if you treat it as a string, you may think you have an <em> tag in there, but in actuality, you only have two button tags.
By injecting into DOM via innerHTML you are taking advantage of the browser's built-in HTML parser, which is pretty darn fast. Doing the same via regular expression would be a pain, and browsers don't generally provide DOM like functionality for finding elements within strings.
One other thing you could try would be parsing the string as XML, but I suspect this would be more troublesome and slower than the DOM injection method.

function countTags(html, tagName) {
var matches = html.match(new RegExp("<" + tagName + "[\\s>]", "ig"));
return matches ? matches.length : 0;
}
alert(
countTags(
"<strong>hello</strong><em>there</em><strong>hot stuff</strong>",
"em"
)
); // 1

var domParser = new DOMParser();
var htmlString = "<strong>hello</strong><em>there</em><strong>hot stuff</strong>";
var docElement = domParser.parseFromString(htmlString, "text/html").documentElement;
var emCollection = docElement.getElementsByTagName("em");
for (var i = 0; i < emCollection.length; i++) {
console.log(emCollection[i]);
}

HTML in a string is nothing special. It's just text in a string. It needs to be parsed into a tree for it to be useful. This is why you need to create an element, then call getElementsByTagName on it, as you show in your example.