获取父元素 html 以及子内容

Get the parent element html along with child content

本文关键字：元素 html 获取      更新时间：2023-09-26

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

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

在我的条件下，我只能访问"my-div"对象，因此我想遍历到"form"，然后获取包括表单 html 在内的整个内容。我一直在尝试的是

$('#my-div').parent().html() - 这实际上是从 .但我想要的是来自<form>

尝试如下：

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

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

或使用.prop() 

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

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

jsBin 演示

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

虽然这可以通过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 .
相关文章：