How would I change the HTML structure of a page using javascript?

Question

I have this webpage for testing with content on it. In 3 other separate HTML files, I have 3 different navigation menus. What I want to do is include a dropdown menu on the testing page with 3 links in it. Each link would change the navigation on the testing page. For example, there is a default navigation on the testing page. Clicking link 1 in the dropdown would change that navigation. Same with link 2 and link 3. How would I do this in JavaScript or jQuery?

Answer 1

This should fit your requirements.

$(document).ready(function() {
  var menu1 = $('#navigation-menu1');
  var menu2 = $('#navigation-menu2');
  var menu3 = $('#navigation-menu3');

  $('#link-1').bind('click', function() {
    $('#navigation').empty();
    $('#navigation').append(menu1);
  });
  $('#link-2').bind('click', function() {
    $('#navigation').empty();
    $('#navigation').append(menu2);
  });
  $('#link-3').bind('click', function() {
    $('#navigation').empty();
    $('#navigation').append(menu3);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="link-1">link 1</a>
<a id="link-2">link 2</a>
<a id="link-3">link 3</a>

<div id="navigation"></div>

<div id="templates" style="display:none;">
  <div id="navigation-menu1">navigation-menu1</div>
  <div id="navigation-menu2">navigation-menu2</div>
  <div id="navigation-menu3">navigation-menu3</div>
</div>