獲取父元素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 。