jQuery.contents() get each element as HTML / STRING

Question

I'm trying to get the HTML form of some objects(including text), using jquery contents. Here's what I got until now:

HTML

<div id="mydiv">
    test
    <p>foo</p>
    <p>bar</p>
</div>

jQuery

$('#mydiv').contents().each(function(){
    console.log($(this).html());
    console.log($(this).prop("innerHTML"));
    console.log($(this).prop("outerHTML"));
});

Is there any way to do this? I've searched around but I couldn't find anything.

Thank you in advance for the answer!

Answer 1

If you are looking for html including the wrapping element then

$('#mydiv').contents().each(function () {
    //check if it is a text node
    if (this.nodeType == 3) {
        //if so get the node value for the element
        console.log(this.nodeValue)        
    } else {
        //if not use outerHTML or innerHTML based on need
        console.log(this.outerHTML);
    }
});

Demo: Fiddle