Convert a jQuery object and contents to string?

StackOverflow https://stackoverflow.com/questions/2000438

  •  18-09-2019
  •  | 
  •  

Question

I'm grabbing various jquery objects to put into an array and later spit out as HTML.

I'm trying to convert the jQuery object to a text string so it can be spit out as HTML later.

I'm using this technique at the moment:

console.log($myObject.clone().wrap('<div></div>').html());

However, that only appears to be grabbing the contents of my object.

For example, if $myObject is <h2>My Title</h2> the above only returns 'My Title' (no H2 tags).

I've also trying using .text() but get the same result.

Is there a way to convert the entire jQuery object into a text string?

Was it helpful?

Solution

Well, answering my own question. 

console.log($('<div>').append($myObject.clone()).remove().html());

Thanks goes to John Feminella in this thread:

How do you convert a jQuery object into a string?

who references this post:

http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-including.html

OTHER TIPS

What you are looking is not to convert a JQuery object to a string but a DOM node to its HTML representation.

There is no builtin method in JQuery to do this, nor there is anything alike in Javascript.

It is a bit tedous but you can, however, rebuild it. The code below is not complete nor tested but here is the idea

var h = '';
$('#my_selector').each(function(){
    h += '<' + this.NodeName;
    for(var k in this.attributes){
        h += ' ' + this.attributes[k].nodeName + '="' + this.attributes[k].value + '" ';
    }
    h += '>';
    h += this.innerHTML;
    h += '</' + this.NodeName + '>';
});

From your example, don't you just need to use call $myObject.html()?

However, since I'm guessing what you're after is probably not just that, would just converting the object to JSON do the job?

There's a couple of jQuery plugins to do that. The one I've used, which has always worked great for me, doesn't seem to be about any more but you can get it here

http://jollytoad.googlepages.com/json.js

A search of the jQuery plugin library gives these 2 as possible alternatives

http://plugins.jquery.com/project/JSONEncoder
http://plugins.jquery.com/project/LABSJSON

I've never tried either of them tho so can't vouch for how effective they are

 console.log($('<div></div>').append($myObject.clone()).html());

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnCreateNewDiv').click(function () {
                $('#result').append($('<div></div>').append($('#testClone').clone()).html());
                $('#result div:last').show();
            });
        });
    </script>
    <style type="text/css">
        .Clone
        {
            background-color: Red;
        }

        .Clone h1
        {
            color: Lime;
        }
    </style>
</head>
<body>
    <input type="button" value="Create New Div" id="btnCreateNewDiv" />
    <span id="result"></span>
    <div id="testClone" class="Clone" style="display: none;">
        <h1>
            test
        </h1>
    </div>
    ​
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top