jQuery将DOM元素作为字符串

Question

Say I have

$(":input[type=text]:first")

How do I get

<input type="text" value="" size="28" maxlength="140" tabindex="1" placeholder="search" class="textbox" name="q" autocomplete="off">

Assuming I run this on SO?

Update I don't want to call .parent() since I have lots of other stuff in the parent element.

Answer 1

怎么样

$(selector).prop("outerHTML");

Answer 2

An old trick:

var selector = ":input[type=text]:first";

var str = $(selector).clone().wrap('<div/>').parent().html();

Update You don't need to worry about calling .parent() since you're working with an orphaned clone of the original selector.

Answer 3

Use jQuery.html() by appending to a created element.

$('<div/>').append($(":input[type=text]:first").clone()).html()

Here is a fiddle providing an example: http://jsfiddle.net/Zwbmx/1/

Answer 4

Following on what @Blazemonger have answered, if you are going to send this html content to the server, it's worth to get rid of all unnecessary tags, white-spaces and line-breaks that don't add any value.

var quote = $(".invoice") //get hidden print-version DOM element
    .clone()
    .wrap('<div/>')
    .parent()
    .html()
    .replace(/    /g, '') //get rid of indentation spaces
    .replace(/(\r\n|\n|\r)/gm, "") //get rid of line breaks
    .replace(/<!--[\s\S]*?-->/g, ""); //get rid of comment tags

My html had 50kb, after getting rid of this stuff, it got reduced to 4kb!

Answer 5

How about:

var str = $(selector)[0]

Maybe add a check that there is one element returned.