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/en-US/docs/Web/API/Element.outerHTML

或使用.prop()

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

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

<强> jsBin demo

Answer 2

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

Answer 3

虽然这可以通过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 {
  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。

获取父元素html以及子内容

3 个答案: