获取父元素html以及子内容

Question

I'm trying to get the parent element html along with the child content. The structure is something like below...

<form>
<div id="my-div">
<span>My Span</span>
</div>
</form>

In my condition I've only access to "my-div" object and with that I want to traverse to "form" and then get the entire content including the form html. What I've been trying is

$('#my-div').parent().html() - which is actually giving content from . But what I want is from <form>

Answer 1

Try like:

$("#my-div").closest("form")[0].outerHTML;

https://developer.mozilla.org/en-US/docs/Web/API/Element.outerHTML

Or using .prop()

$("#my-div").closest("form").prop("outerHTML");

The .closest("form") will get you the parent FORM Element no matter where you nest your children #my-div in the future.

jsBin demo

Answer 2

$('#my-div').parent().prop('outerHTML')

Answer 3

While this can be achieved with jQuery, it's an unnecessary expense for the most part, since the jQuery object has to be parsed and then the DOM Node retrieved from the object (unless using prop() ), with plain JavaScript it's a little cheaper:

var htmlString = document.getElementById('my-div').parentNode.outerHTML;

 var html = document.getElementById('my-div').parentNode.outerHTML; document.getElementById('htmlResult').textContent = html; 

 #htmlResult { white-space: pre-wrap; padding: 0.5em; color: #666; border: 1px solid #000; border-radius: 1em; } #htmlResult::before { content: 'Result: '; color: #aaa; display: block; } 

 <form> <div id="my-div"> <span>My Span</span> </div> </form> <div id="htmlResult"></div> 

References:

• Element.outerHTML .
• Node.parentNode .