jQuery get all attributes as string variation

Question

I've got some simple html a bit like this

<a href="" data-type="" data-id="" data-tags="" id="" class="">balrbalr</a>

I'd like to be able to get the full contents of <a> as a string.

I know you can use .html to get the inner html, however if I use

var string = $('a').html();

If would return, balrblabrlabr

If I do string = $('a').parent.html();

I'd get ALL of the <a>'s inside the parent.

how would I go about just getting the full html content of itself?

See this question: http://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery — xbonez, May 19 '12 at 23:47

gdoron is supporting Monica · Accepted Answer · 2012-05-20T00:17:17.750

5

You can use native javascript outerHTML property of DOM elements:

var string = $('a')[0].outerHTML;

Live DEMO

The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can be set to replace the element with nodes parsed from the given string.

MDN

If you wish to get the outerHTML of multiple elements, you can use jQuery map function, like in this example:

var str = $('#foo a').map(function() {
    return this.outerHTML;
}).get();

Live DEMO

edited May 20 '12 at 00:17

answered May 19 '12 at 23:51

gdoron is supporting Monica

142,542
55
282
355

@KrishanuDey. Did you use a browser with a `console`? change `console.log` to `alert` – gdoron is supporting Monica May 20 '12 at 00:13
@KrishanuDey. So.. why doesn't it work for you?! what happen when you change to `alert`? – gdoron is supporting Monica May 20 '12 at 00:36
Here is another screenshot when using `alert()`. http://www.freeimagehosting.net/newuploads/c4j4f.png – Krishanu Dey May 20 '12 at 00:58

Krishanu Dey · Answer 2 · 2012-05-20T00:26:29.457

0

Set your element's id to "a" and just use this function

    function msg() {
        var attrib="";
        var el =document.getElementById('a');
        for (var i = 0; i < el.attributes.length; i++) {
            attrib = attrib + ' ' + el.attributes.item(i).nodeName + ' = "' + el.attributes.item(i).nodeValue + '"';
        }
        alert(attrib);
    }

edited May 20 '12 at 00:26

answered May 20 '12 at 00:08

Krishanu Dey

6,212
6
50
67

@VisioN. [It works](http://jsfiddle.net/GZXpV/5/), but in a very unefficient way. – gdoron is supporting Monica May 20 '12 at 00:26
Now i'm using a veriable `el` rather than using `document.getElementById('a')` multiple times. – Krishanu Dey May 20 '12 at 00:32
@gdoron Mmm... I have another approach http://jsfiddle.net/GZXpV/6/. Maybe it is not so flexible... Should I add it as an answer? – VisioN May 20 '12 at 00:34
@VisioN. Hell no! You regex the whole body!!! do you know how risky and inefficient it is? – gdoron is supporting Monica May 20 '12 at 00:38
@KrishanuDey You can better assign `document.getElementById('a').attributes` to a variable. – VisioN May 20 '12 at 00:39
@gdoron Yeah! I can invent several more "wonderful" solutions ;) – VisioN May 20 '12 at 00:40
@VisioN :it works. but will you explain how? what does this expression mean, `/()/.exec(body);` ? – Krishanu Dey May 20 '12 at 00:40
@KrishanuDey. it's a regular expression looking for an anchor with the `a` id. – gdoron is supporting Monica May 20 '12 at 00:41
@KrishanuDey This expression shows almost the same approach as you presented in your answer. It should not be used for such an easy task. `outerHTML` does the job. Nothing else needed. – VisioN May 20 '12 at 00:42

jQuery get all attributes as string variation

2 Answers2