html function jquery put html in div or list

In the following web example we have a list with id list, two buttons to copy and replace and a div with id show.

We select the button with id copy, when clicked we get the html content of the list, then we select the div with id show and add that html content.
We select the button with id replace, when clicking we generate a function that selects the list and replaces the old html content with a new one.

<ul id="list">
  <li>Text 1</li>
  <li>Text 2</li>
  <li>Text 3</li>
  <li>Text 4</li>
</ul>
<button id="copy">Copy HTML</button>
<button id="replace">Replace HTML</button>
<div id="show"></div>
<!--Script jQuery-->
<script>
  /*
  We select the button with id copy, when clicked we get the html content of the list, 
  then we select the div with id show and add that html content.
  */
  $('#copy').click(function(){
    var content_html = $('ul#list').html();
    $('#show').html(content_html);
  });
  /*
  We select the button with id replace, when clicking we generate a function that selects the list 
  and replaces the old html content with a new one.
  */
  $('#replace').click(function(){
    $('ul#list').html(function(index,oldText){
      return '<li>New Text '+index+'</li>';
    });
  });
</script>
<!--JQuery Library-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>