Почему после использования appendTo, невозможно прочитать эти новые данные через innerHTML?

Что нужно сделать, что бы после сортировки, можно было считать данные из myOutput в content?

<!DOCTYPE html>
<html>
<head>

<!--Подключаем библиотеку jquery-->
<script
  src="https://code.jquery.com/jquery-3.6.0.slim.js"
  integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY="
  crossorigin="anonymous"></script>
  

 </head>
 <body>

 <style>
 

   

.bookmarkList a {
  display: block;
  margin-bottom: 0;
  color: #000;
  text-decoration: none;
  border-bottom: 2px ridge #fff;
  padding: 0px 10px;
}

.bookmarkList a:hover {
text-shadow: white 0 0 10px;
  background: rgba(248, 239, 235, 0.50);
}
 </style>
 
 
 

<center>
 <div class="bookmarkList">
  <p>Список новых закладок</p>
   <!--[Начало] Закладки -->
    <div id="myOutput">
 

<a href="javascript:;" rel="44" >два </a>
<a href="javascript:;" rel="7.632057">раз []</a>
<a href="javascript:;" rel="55.632057">три []</a>
   
    </div>
        <!--[Конец] Закладки -->
 </div>
<p><button class="" onclick="sort_a()">Сортировать</button></p>
   






    <summary>Код между тегами div, id - myOutput</summary>

<form>
    <textarea id="content" rows="8" cols="60"></textarea>
</form>
<p><button class="" onclick="load_read_B()">Прочитать .myOutput</button></p>

</center>


<script>
    // Сортирует все "a" с параметром "rel"
function sort_a() {
$('a[rel]').sort(function (a, b) {
    
        return parseInt($(a).attr('rel')) - parseInt($(b).attr('rel'));
    }).appendTo('.bookmarkList');
}

    //Читает myOutput и записывает эти данные в content
function load_read_B() {
document.getElementById('content').innerHTML = document.getElementById('myOutput').innerHTML
}

   </script>
   
 </body>
</html>


Ответы (0 шт):