Question

我试图通过引用外部JavaScript文件来附加我的菜单，而无需在我的每个文件中手动添加菜单。我该怎么做？这是我打算添加的菜单。顺便说一下，我正在使用bootstrap。我将脚本src放在我的结束体标记之前。

                <header class="container">
                    <div class="row">
                        <a href="..\index.html"><img class="col-sm-2" src="..\logo.png" /></a>
                        <nav class="col-sm-10 navbar navbar-inverse">
                            <div class="container-fluid">
                                <ul class="nav navbar-nav navbar-right text-uppercase">
                                    <li><a href="..\index.html">Home</a></li>
                                    <li><a href="..\about.html">About</a></li>
                                    <li class="active"><a href="..\story_1.html">Revenge Is A Dish Best Served Cold</a></li>
                                    <li><a href="..\gallery.html">Gallery</a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                </header>

Answer 1

只需使用innerHTML：https://jsfiddle.net/8zaLv0js/

var ul = document.getElementsByClassName('navbar-nav')[0];

ul.innerHTML = ul.innerHTML + "<li><a href=\"#\" onClick=\"alert('hello world!')\">click me!</a></li>";

Answer 2

在ES6中你可以

Import './template.html' as template;

document.getElementById('container').append(template);

根据实际标准，我猜最简单的方法是使用JQuery

$('container').load('./template.html');

使用JavaScript附加HTML

2 个答案: