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!

Arun P Johny · Accepted Answer · 2014-03-08 11:19:51Z

14

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

answered Mar 8, 2014 at 11:19

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

isherwood · Accepted Answer · 2022-06-13 14:34:34Z

0

Try $('div').html() -- it's output html of element. Or console.log($('div').html())

edited Jun 13, 2022 at 14:34

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Mar 8, 2014 at 11:21

user1809655

1316 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related