如何获取父元素html而不是子标签？

Question

我不确定我给我的问题提供了正确的标题，但我想要求做类似的事情：

我想获取父元素的 HTML 内容。通过这样做，这也将包括子元素的 HTML 标记，但我不希望这样。我只想要儿童 HTML。

例如：

<div class="test"> This is content of div
  <p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.<span><i>As you<br> can</i></span> see I have added <br> tag</p>
</div>

从上面的例子如果我使用.text() jquery 方法来获取 div 内容，我将只获取文本而不是<br> 标签。但是如果我使用.html() jquery，这也将包括<p class="boring_class" style='dflkdjf'>....</p>，但我不想要那个。

我只想要子元素的 html，即：This is paragraph<br> content.As you can see I have added <br> tag。

我怎样才能做到这一点？

最终输出应如下所示：

This is content of div This is paragraph <br> content.As you can see I have added <br> tag

Answer 1

作为对问题的一种可能解释：

获取所有子节点的 html，包括文本 [不在子节点中]

您可以使用.contents() 包含父节点的文本节点（不在标签中的部分，例如“这是 div 的内容”）然后循环遍历这些节点以获取文本或 html，具体取决于它的位置是，给予：

var output = $(".test").contents().map((i, e) => {
    if (e.nodeType == 3)
      return $(e).text();
    return $(e).html()
  })
  .toArray()
  .join(" ");

console.log(output)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"> This is content of div
  <p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.As you can see I have added <br> tag</p>
</div>

请注意，这包括问题示例输出中未包含的所有空格（换行符），因此您可能需要删除这些空格才能完全匹配。

Answer 2

您可以通过使用innerHTML 在常规javascript 中完成此操作，如下所示。

欲了解更多信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

const list = document.getElementsByClassName("test")[0];

const inner = list.innerHTML;

const noP = inner.replace(/<p[^>]*>/g, "").replace(/<\/p[^>]*>/g, "").replace(/\n/g,'');

console.log(noP);

<div class="test"> This is content of div 
<p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.As you can see I have added <br> tag</p>
</div>