Копировать все внутри элемента, кроме его текстового содержимого

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 );

Но как мне убрать его из всего текста -из всего неэлементного контента?

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()