JavaScript:返回包含您定位的标签的innerHTML？

Question

JS 新手。我无法在 Stacks 中找到答案，所以我希望这不是重复。我正在尝试返回标签的 innerHTML，包括我定位的标签。假设你有这个 HTML:

<div class="parent">
  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>
</div>

而这个JS:

const divInner = document.querySelector('.parent').innerHTML
console.log(divInner)

控制台日志将仅返回 div 标签内的 html:

  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>

有没有办法返回父标签(div)的innerHTML INCLUSIVE，以便控制台日志返回整个部分，而无需在div之外创建另一个父容器？:

<div class="parent">
  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>
</div>

我知道我可以做到这一点，如果我只是在内部 div 之外添加另一个父 div 并以父 div 的 innerHTML 为目标，但我正在尝试将它应用到添加更多 div 会搞乱对齐/间距的页面上，我不这样做如果我可以避免它，我不想重新调整它。

Answer 1

是的，您可以使用 outerHTML 来完成。 .

The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can be set to replace the element with nodes parsed from the given string.

const divInner = document.querySelector('.parent').outerHTML;
console.log(divInner);

<div class="parent">
  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>
</div>