Javascript 获取父元素html和子内容

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

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

我的跨度

在我的情况下，我只能访问

“我的div”

对象，我想通过它遍历

“表单”

，然后获取整个内容，包括表单html。我一直在尝试的是

$（“#我的div”）.parent（）.html（）

-实际上是从中提供内容。但是我想要的是来自

尝试一下：

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

或者使用

.prop（）

.closest（“form”）

将为您提供父表单元素，无论您将来将孩子嵌套在哪里

#my div

尝试一下：

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

或者使用

.prop（）

.closest（“form”）

将为您提供父表单元素，无论您将来将孩子嵌套在哪里

#my div

---

虽然这可以通过jQuery实现，但这在很大程度上是不必要的开销，因为必须解析jQuery对象，然后从对象中检索DOM节点（除非使用

prop（）

），而使用纯JavaScript则更便宜一些：

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

var html=document.getElementById（'my-div'）.parentNode.outerHTML；
document.getElementById（'htmlResult'）。textContent=html
#htmlResult{
空白：预包装；
填充：0.5em；
颜色：#666；
边框：1px实心#000；
边界半径：1米；
}
#htmlResult:：before{
内容：“结果：”；
颜色：#aaa；
显示：块；
}

我的跨度
虽然这可以通过jQuery实现，但这在很大程度上是不必要的开销，因为必须解析jQuery对象，然后从对象中检索DOM节点（除非使用
prop（）
），而使用纯JavaScript则稍微便宜一些：

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


var html=document.getElementById（'my-div'）.parentNode.outerHTML；
document.getElementById（'htmlResult'）。textContent=html
#htmlResult{
空白：预包装；
填充：0.5em；
颜色：#666；
边框：1px实心#000；
边界半径：1米；
}
#htmlResult:：before{
内容：“结果：”；
颜色：#aaa；
显示：块；
}

我的跨度
$（'#我的div'）.parent（）.prop（'outerHTML'）
$（'#我的div'）.parent（）.prop（'outerHTML'）
感谢分享参考。感谢分享参考。
$（“#我的div”）.prop（'outerHTML'）work@Sriram这是因为你是
[0]
（数组集合中的Get元素），当您在jQuery作用域
$（“#my div”）中时不需要它。最近的（“form”）[0]。prop（'outerHTML'）
将不需要它work@Sriram这是因为您使用的是
[0]
（数组集合中的Get元素），当您在jQuery范围内时，这是不需要的