Question

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

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

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

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

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

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

但是我如何从所有非元素内容中删除所有文本？

Answer 1

您可以使用$(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>

Answer 2

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 3

您可以选择div的所有子级，然后使用空函数，如下所示：

$("#masterdiv").children().empty()

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

3 个答案: