JQuery Object to String

Question

How do you get convert a JQuery object to string?

Rex M: It's useful to be able to do this in a return context. For example: 374 function query_box(tab) 375 { 376 var ta = $("<textarea></textarea>"); 377 ta.attr("id","query_box"); 378 console.log(ta.attr("id")); 379 //ta.val(query.tab); 380 var ret = $( 381 [ 382 ($('<div>').append(ta).clone()).remove().html(), 383 "<br />", 384 "<input value='Run Query' id='run_query_popup' type='submit'/>", 385 "<?=$this->session->userdata?>" 386 ].join("") 387 ); 388 return ret;
HE IS BEING SPECIFIC!! Rex! He is asking..EXACTLY..how to convert jquery object to string. Please tell me what is so hard to understand? Does it matter why? Do you really need a massive story to tell him? You didn't even answer the question. ( I know, the irony).
I think people like REX that skulk forums and discussion boards, ready to shoot down any person inquiring about an issue simply to get off an ego trip is what we are all, in a way, just simply sick and tired of. Instead of replying with, "why do you need to do that?" or "there is no specific answer to your specific question, it all 'depends'" or my favorite "have you tried googling it?", why not bring something constructive or just don't butt in at all.

wheresrhys · Accepted Answer · 2012-02-07 12:57:52Z

up vote 166 down vote accepted

I assume you're asking for the full HTML string. If that's the case, something like this will do the trick:

$('<div>').append($('#item-of-interest').clone()).html();

This is explained in more depth here, but essentially you make a new node to wrap the item of interest, do the manipulations, remove it, and grab the HTML.

If you're just after a string representation, then go with new String(obj).

edited Feb 7 '12 at 12:57

wheresrhys
4,4171856

answered Mar 17 '09 at 1:44

John Feminella
89.1k13176243

4

Excellent response. – Stefan Kendall Sep 30 '09 at 22:00

14

It sucks that there isn't a method to just do this, but this is a great solution regardless. – Steve Mar 8 '10 at 16:45

3

an outerhtml() would be perfect – Sam Jan 31 '11 at 16:58

6

This works with SVG!!! Cool trick! :D – Cipi Apr 13 '11 at 13:06

this removes the head and body tags – ile Jan 9 at 7:06

show 1 more comment

nickh · Answer 2 · 2011-09-29 03:18:54Z

up vote 36 down vote

With jQuery 1.6, this seems to be a more elegant solution:

$('#element-of-interest').prop('outerHTML');

answered Sep 29 '11 at 3:18

nickh
1,0751014

2

will not work in firefox – Jean-Philippe Leclerc Feb 9 '12 at 16:52

3

@Jean-PhilippeLeclerc On Firefox 15.0.1 (linux) it works like a charm. – dave Sep 21 '12 at 13:01

4

This worked great for me in firefox 19.0 – Nate Flink Feb 26 at 21:43

Alex Rockwell · Answer 3 · 2009-03-17 01:47:09Z

up vote 10 down vote

Can you be a little more specific?

If you're trying to get the html inside of a tag you can do something like this:

Html snippet:

<p><b>This is some text</b></p>

Jquery:

var txt = $('p').html(); // value of text is <b>This is some text</b>

answered Mar 17 '09 at 1:47

Alex Rockwell
752310

	Thanks Alex! You helped me! – henrijs Aug 26 '10 at 20:50
	Excellent! Very handy method indeed. – Liutauras Feb 1 '11 at 14:34

crystalh · Answer 4 · 2011-11-17 11:55:56Z

up vote 5 down vote

The best way to find out what properties and methods are available to an HTML node (object) is to do something like:

console.log($("#my-node"));

From jQuery 1.6+ you can just use outerHTML to include the HTML tags in your string output:

var node = $("#my-node").outerHTML;

answered Nov 17 '11 at 11:55

crystalh
6711

2

.outerHTML didn't work for me. Is it documented anywhere? – x3ro Jun 12 '12 at 15:48

mppfiles · Answer 5 · 2012-03-16 11:37:06Z

up vote 3 down vote

Just use .get(0) to grab the native element, and get its outerHTML property:

var $elem = $('<a href="#">Some element</a>');
console.log("HTML is: " + $elem.get(0).outerHTML);

answered Mar 16 '12 at 11:37

mppfiles
16615

Johan Dettmar · Answer 6 · 2011-06-09 12:11:32Z

up vote 2 down vote

This seems to work fine for me:

$("#id")[0].outerHTML

answered Jun 9 '11 at 12:11

Johan Dettmar
993

2

I was also using this but this doesn't seem to work for Firefox 6.0.1. – mikong Sep 2 '11 at 10:25

alex · Answer 7 · 2011-09-14 01:20:27Z

up vote 2 down vote

new String(myobj)

if you want to serialize the whole object to string use json.

edited Sep 14 '11 at 1:20

alex
146k57278487

answered Mar 17 '09 at 1:42

Vasil
9,507144578

1

this doesn't work (tried with a jquery 1.8 object) – ile Jan 9 at 7:04

St Kiss · Answer 8 · 2012-02-13 18:37:50Z

up vote 2 down vote

No need to clone and add to the DOM to use .html(), you can do:

$('#item-of-interest').wrap('<div></div>').html()

answered Feb 13 '12 at 18:37

St Kiss
535

But doesn't wrap() return the wrapped element, not the element with which it was wrapped? So this should give the html of the #item-of-interest not it's parent div element (unless jQuery's changed since February of 2012). – David Thomas Jul 7 at 23:07

Max Meents · Answer 9 · 2011-05-13 10:32:52Z

up vote 1 down vote

jQuery up in here so ...

jQuery.fn.goodOLauterHTML= function() {
 return $('<a></a>').append( this.clone() ).html();
}

return all that html shtuff

$('div' /*elys with html text stuff thatcha want */ ).goodOLauterHTML(); // alerts tags en all

edited May 13 '11 at 10:32

answered May 13 '11 at 10:26

Max Meents
112

Dario Cangialosi · Answer 10 · 2010-05-29 01:52:29Z

There's my implementation of dumpElement:

// example usage
var element = $('head').get()[0];
console.log( dumpElement(element) );

function dumpElement( element ) {

    var elementDump;

    // dump element attributes
    var attrDump = '';

    var attribute;
    var dumpedAttribute;
    for( var i = 0; i < element.attributes.length; i++) {

        attribute = element.attributes[i];

        // skip every not specified attribute (useful for example in IE)
        if ( attribute.specified == false ) continue;

        // current attribute dump
        dumpedAttribute = attribute.name + '="' + attribute.value + '"';

        // add current attribute to dump, separating attributes with whitespace
        attrDump += ((attrDump != '')?' ':'') + dumpedAttribute;
    }

    var tagName = element.tagName.toLowerCase();

    // note: innerHTML does not preserve code formatting
    // note: innerHTML on IE sets the tags names to uppercase (e.g. not W3C Valid)
    if( element.innerHTML == '' ) {

        // self closing tag syntax
        elementDump = '<' + tagName + ((attrDump != '')? ' '+attrDump : '') + '/>';  

    } else {

        elementDump = '<' + tagName + ((attrDump != '')? ' '+attrDump : '') + '>' +
            element.innerHTML +
            '</' + tagName + '>';
    }

    return elementDump;
}

Charles Menguy · Answer 11 · 2012-04-27 04:37:40Z

up vote 0 down vote

It may be possible to use the jQuery.makeArray(obj) utility function:

var obj = $('<p />',{'class':'className'}).html('peekaboo');
var objArr = $.makeArray(obj);
var plainText = objArr[0];

edited Apr 27 '12 at 4:37

Charles Menguy
8,210101852

answered Apr 26 '12 at 4:48

duttyman
211

asked	4 years ago
viewed	165509 times
active	8 months ago

JQuery Object to String

11 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged jquery jquery-object stringification or ask your own question.

Linked

JQuery Object to String

11 Answers

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged jquery jquery-object stringification or ask your own question.

Linked

Related