jQuery to return the wrapper of the content instead of only the content

Question

Assume I have the following HTML

<articles>

    <article id="a1">
        <!-- Content of article with id="a1" -->
    </article>

    <article id="a2">
        <!-- Content of article with id="a2" -->
    </article>

    <article id="a3">
        <!-- Content of article with id="a3" -->
    </article>

</articles>

Using jQuery, I did the following

var x = $("#a2").html();

Now, the variable x will contian:

<!-- Content of article with id="a2" -->

However, I like to have x contain:

<article id="a2">
    <!-- Content of article with id="a2" -->
</article>

I tried:

var x = $("#a2").parent().html();

but this returned all three articles, which is not what I want. I only want article a2. How can I do that?

Thanks.

score 1 · Accepted Answer · answered Jul 25 '14 at 05:44

1

Try to use the .outerHTML property,

var x = $("#a2")[0].outerHTML;

answered Jul 25 '14 at 05:44

Rajaprabhu Aravindasamy

66,513
17
101
130

Why do I have to use index [0]? – Greeso Jul 25 '14 at 05:45
1

@Greeso Since `.outerHTML` is a property belongs to the element object of plain javascript. we have to get it by reading the element from index 0. – Rajaprabhu Aravindasamy Jul 25 '14 at 05:46
2

outerHtml is not a property of jquery it's javascript. var x = documentElementById('a2').outerHTML; – Sudharsan S Jul 25 '14 at 05:47

jQuery to return the wrapper of the content instead of only the content

1 Answers1