复制元素内除文本内容外的所有内容

Question

说，我们有一个嵌套的元素结构：

<div id="no1">
  <nav>
    <h1>text</h1>
    <h2>more text</h2>
  </nav>
  Even more text
</div>

我如何用jQuery复制此<div>中包含的元素并将其从所有元素中的所有文本插入另一个<div> 剥离中？要达到这样的结果：

<div id="no2">
  <nav>
    <h1></h1>
    <h2></h2>
  </nav>
</div>

使用jQuery，我可以将所有html复制粘贴到元素中：

var a = jQuery('#no1').html();
jQuery('#no2').html( a );

但是如何从所有
非元素

内容中删除所有文本？

说，我们有一个嵌套的元素结构：

text

more text甚至更多的文本怎么能...

< [

您可以使用$(selector).text("")删除文本。这将删除选择器中所有项目的文本值（而不仅仅是第一个），因此不需要.each()

var h = $("#no1").html();
$("#no2").html(h);
$("#no2,#no2 *").text("");
// or, depending on meaning on "non-element content"
//$("#no2 *").text("");
div { border: 1px dashed #ccc }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="no1">
  <nav>
    <h1>text</h1>
    <h2>more text</h2>
  </nav>
  Even more text
</div>
<hr/>
<div id="no2">
</div>

let a = $('#no1').html();
$('#no2').html(a);
$('#no2, #no2 *').contents().filter(function() {
  return this.nodeType === Node.TEXT_NODE;
}).remove();
console.log(jQuery('#no2').html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="no1">
  <nav>
    <h1>text</h1>
    <h2>more text</h2>
  </nav>
  Even more text
</div>
<div id="no2"></div>

Answer 1

您可以使用$(selector).text("")删除文本。这将删除选择器中所有项目的文本值（而不仅仅是第一个），因此不需要.each()

Answer 2