Question

I am trying to use html() function of jquery over the specific child like:

<div id="main">
  <p>I am p tag</p>
  <span> i am span tag</span>
</div>

Now if we use $("#main").html() it gives both p and span but if i want only p, what should i do?

Answer 1

Try like below,

$("#main p").html()

This will give me I am p tag but i want <p> I am p tag</p>

Try below for outerHTML,

$('#main p')[0].outerHTML

Or you can make it as jQuery function so you can chain.

jQuery.fn.outerHTML = function(s) {
    var _this = this[0];
    return _this.outerHTML?_this.outerHTML:(s ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html());
};

$('#main p').outerHTML()

DEMO: http://jsfiddle.net/skram/PMjKR/1/

Ref: Get selected element's outer HTML