I want to save an element's html to a variable

Question

I know how to use .html() to grab the html inside of my selected element, like so:

<div id="outside>
    <span>hello</span>
</div>

using something like

var span = $('#outside).html();

will grab my span as the html. My problem is when I have

<img id="image" src="image.png">

How can I assign the html, as a string, to a variable? Using

var image = $('#image').html()

gives me an empty string.

var image = $('#image')[0]

appears to get the html I want, but its actually still an object.

I'm almost sure that your answer is **[here][1]**. [1]: http://stackoverflow.com/questions/652763/jquery-object-to-string — Marcelo Assis, Nov 04 '11 at 18:59
Thanks Marcelo Assis, that worked! For those wondering, the string is $('
').append($('#image')).clone()).remove().html() — user883036, Nov 04 '11 at 19:05

Keith.Abramo · Answer 1 · 2011-11-04T19:17:35.663

5

Try this:

var myAwesomeHTML = $('#image')[0].outerHTML

update:

$("<div></div>").append($("#image")).html()

edited Nov 04 '11 at 19:17

answered Nov 04 '11 at 18:53

Keith.Abramo

6,952
2
32
46

Did you close your img tag with / ? – Keith.Abramo Nov 04 '11 at 19:00
Sorry that solution only seems to work in Safari. Try my updated solution. – Keith.Abramo Nov 04 '11 at 19:17
I like your enthusiasm with `myAwesomeHTML` – krummens Feb 24 '17 at 03:28

Exception · Answer 2 · 2015-04-12T12:10:45.493

2

This can be easily done by wrapping an element to it and getting theparent element's HTML like this

 var a=$('#image');
 a.wrap('<span class="ab"></span>');
 var htmlOfEle=$('.ab').html();

Here is the fiddle.. http://jsfiddle.net/CR2PD/2/ It may help you..

Edit:

Without using jQuery, you can do like below

var el = document.getElementById('image');
html = el.outerHTML

edited Apr 12 '15 at 12:10

answered Nov 04 '11 at 19:08

Exception

8,111
22
85
136

Better to do .outerHTML instead of adding some element around what you want. .outerHTML grabs the element AND what's inside of it. – Jeremy Miller Jan 14 '15 at 21:05

Marcelo Assis · Answer 3 · 2011-11-04T19:22:00.087

0

Try creating this function into Jquery core:

jQuery.fn.outerHTML = function(s) {
return (s)
? this.before(s).remove()
: jQuery("&lt;p&gt;").append(this.eq(0).clone()).html();
}


$('#myTag').outerHTML();

Source here.

edited Nov 04 '11 at 19:22

answered Nov 04 '11 at 19:01

Marcelo Assis

5,136
3
33
54

score 0 · Answer 4 · answered Nov 04 '11 at 19:11

outerHTML is not supported in firefox. You could try something like this :

var image = document.getElementById("image");

alert(outerHTML(image));

function outerHTML(elem){
    if (typeof elem.outerHTML !== "undefined")
    {
        return elem.outerHTML;
    }

    var s = "<" + elem.nodeName.toLowerCase();

    for (var i = 0; i < elem.attributes.length; i++)
    {
        s += " " + elem.attributes[i].name + '"' + escape(elem.attributes[i].value) + '"';
    }

    if (elem.hasChildNodes())
    {
        return s + ">" + elem.innerHTML + "</" + elem.nodeName + ">";
    }

    return s + " />";
}

score -1 · Answer 5 · answered Nov 04 '11 at 18:53

-1

To set the html for an element, you just use the .html() function, but pass it the string you want to set the html as: $('#image').html('<span>Hello</span>')

answered Nov 04 '11 at 18:53

Joe C.

1,538
11
14

I think s/he want's to *get* the html of the element/object, not set it. – David Thomas Nov 04 '11 at 18:54
The question is about getting the HTML, not setting it. :) – GolezTrol Nov 04 '11 at 18:54
The example with the span was unrelated. Just an example to explain how the two things were different. – user883036 Nov 04 '11 at 18:58

I want to save an element's html to a variable

5 Answers5