如何使用javascript更改页面的HTML结构？

Question

我有用于测试内容的网页。 在其他3个单独的HTML文件中，我有3个不同的导航菜单。 我要做的是在测试页面上包含一个下拉菜单，其中包含3个链接。 每个链接都会更改测试页面上的导航。 例如，测试页面上有一个默认导航。 单击下拉列表中的链接1将更改该导航。 与链接2和链接3相同。如何在JavaScript或jQuery中执行此操作？

Answer 1

这应该符合您的要求。 有关演示，请参阅此Fiddle 。

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


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

Answer 2

jQuery的工作方式是，您可以使用自定义代码设置某个事件的侦听器，以在发生任何情况时运行。 这是链接的示例：

<a id="mylink" href="home.html">Go Home</a>

javascript（将其放在您的和标记之间）：

 <script type="text/javascript">
      $(document).ready(function() {
         //This code gets run when the page is finished loading
         $('a#mylink').click(function() {
              //Handle the event here
         });
     });
</script>

您还询问如何在运行时动态更改HTML。 jQuery对于此.html（）具有强大的功能

说你有一些HTML：

<div id="changeme">Hello</div>

下面的jQuery：

$('#changeme').html("Goodbye");

将页面的html更改为以下内容

<div id="changeme">Goodbye</div>