Append HTML using JavaScript

Question

I'm trying to append my menu by referring to an external JavaScript file without manually adding the menu in each of my files. How do I go about this? Here is the menu I intend to add. Btw, I'm using bootstrap. I placed the script src before my ending body tag.

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

"innerHTML doesn't seem to work with links" — It does work with links. — Quentin
– Quentin, Commented May 27, 2016 at 12:05

Felippe Duarte · Accepted Answer · 2016-05-27 12:09:42Z

1

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

answered May 27, 2016 at 12:09

Felippe Duarte

15.2k2 gold badges27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felippe Duarte Over a year ago

No. OP has a doubt about how to append HTML to his DOM. That's one way to do.

Norseback Over a year ago

This is exactly what I needed. Thanks a lot.

PRDeving · Accepted Answer · 2016-05-27 12:13:10Z

1

In ES6 you could just

Import './template.html' as template;

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

With the actual standard i guess the easiest way is to use JQuery

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

answered May 27, 2016 at 12:13

PRDeving

6693 silver badges11 bronze badges

Collectives™ on Stack Overflow

Append HTML using JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related