javascript - 使用 JavaScript 附加 HTML

Question

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

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