JavaScript：Return innerHTML 包含您定位的标签？

Question

JS 新手。我无法在 Stacks 中找到这个问题的答案，所以我希望它不会重复。我正在尝试 return 标签的内部 HTML，包括我定位的标签。假设你有这个 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)

控制台日志将 return 仅 div 标签内的 html：

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

有没有办法return父标签（div）的innerHTML INCLUSIVE，让控制台记录return这一整段, 无需在 div?:

之外创建另一个父容器

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

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

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>

JavaScript：Return innerHTML 包含您定位的标签？

JavaScript: Return innerHTML inclusive of the tag you're targeting?

javascript

innerhtml