获取父元素html以及子内容

Question

我正在尝试获取父元素html和子内容。 结构如下所示...

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

在我的情况下，我只能访问"my-div"对象，并且想要遍历"form" ，然后获取包括html表单在内的全部内容。 我一直在尝试的是

$('#my-div').parent().html() -实际上是提供的内容。 但是我想要的是来自<form>

Answer 1

试试：

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

https://developer.mozilla.org/zh-CN/docs/Web/API/Element.outerHTML

或使用.prop()

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

无论将来将孩子嵌套在#my-div的.closest("form")都会为您提供父FORM元素。

jsBin演示

Answer 2

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

Answer 3

尽管这可以使用jQuery来实现，但是在大多数情况下这是不必要的开销，因为必须先解析jQuery对象，然后再从对象中检索DOM Node（除非使用prop() ），而使用普通JavaScript则要便宜一些：

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> 

参考文献：

• Element.outerHTML 。
• Node.parentNode 。