How to create a navigation bar dynamically in javascript

Question

I have a code which creates a navigation bar dynamically with the help of java script code the code runs like this.

var _dockPanel;
var content = document.createElement('div');
content.innerHTML = "";
var liststart = document.createElement('ul');
var listelement1 = document.createElement('li');
var listelement2 = document.createElement('li');
listelement1.innerHTML = '<a href="#tabs-1">One</a>';
listelement2.innerHTML = '<a href="#tabs-2">Two</a>';
liststart.appendChild(listelement1);
liststart.appendChild(listelement2);
var t1 = document.createElement('div');
var t2 = document.createElement('div');

t1.id = "tabs-1";
t2.id = "tabs-2";

t1.innerHTML = "Tab 1";
t2.innerHTML = "Tab 2";

content.appendChild(liststart);
content.appendChild(t1);
content.appendChild(t2);
var html = [
  '<div>',
  '<nav class="navbar navbar-default">',

  '<ul class="nav navbar-nav">',
  '<li class="active"><a href="#">Home</a></li>',
  ' <li><a href="#">Page 1</a></li>',
  '<li><a href="#">Page 2</a></li>',
  '</ul>',

  '</nav>',
  '</div>'
].join('\n');

_dockPanel.container.append(content);

I get a partial output. That is the <ul> elements and the <li> elements are just listed and a navigation bar does not get creates. what else can I do to make my code better. Thanks in advance.

Possible duplicate of How to dynamically add a navbar to a jQuery Mobile application — Aung Myo Linn
– Aung Myo Linn, Commented Jul 25, 2017 at 4:18
Well this is not a jQuery Mobile application @kolunar I'm creating it for a web page with javascript coding. — user8265273
– user8265273, Commented Jul 25, 2017 at 4:32

Ananth Cool · Accepted Answer · 2017-07-25 05:01:34Z

1

Try this

<!DOCTYPE html>   
<head>
<title></title>
<style>
</style>
</head>
<html>
<body>
    <div id="navbar1"></div>
    <div id="navbar2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){     
    var _dockPanel;
    var content = document.createElement('div');
    content.innerHTML = "";
    var liststart = document.createElement('ul');
    var listelement1 = document.createElement('li');
    var listelement2 = document.createElement('li');
    listelement1.innerHTML = '<a href="#tabs-1">One</a>';
    listelement2.innerHTML = '<a href="#tabs-2">Two</a>';
    liststart.appendChild(listelement1);
    liststart.appendChild(listelement2);
    var t1 = document.createElement('div');
    var t2 = document.createElement('div');

    t1.id = "tabs-1";
    t2.id = "tabs-2";

    t1.innerHTML = "Tab 1";
    t2.innerHTML = "Tab 2";

    content.appendChild(liststart);
    content.appendChild(t1);
    content.appendChild(t2);
    var html = [
      '<div>',
      '<nav class="navbar navbar-default">',

      '<ul class="nav navbar-nav">',
      '<li class="active"><a href="#">Home</a></li>',
      ' <li><a href="#">Page 1</a></li>',
      '<li><a href="#">Page 2</a></li>',
      '</ul>',

      '</nav>',
      '</div>'
    ].join('\n');
    $("#navbar1").append(html);
    $("#navbar2").append(content);
});
</script>
</body>
</html>

Check this in Fiddle

answered Jul 25, 2017 at 5:01

Ananth Cool

1358 bronze badges

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

3 Comments

user8265273 Over a year ago

There is no navigation bar. It is just listing the items. I dont need that @Ananth Cool

Ananth Cool Over a year ago

Yes. It is not 100% navabar. You should add some css properties to make looks like navbar. Here I didn't add bootstrap framework file. Add them to get result like this in my updated fiddle

Ananth Cool Over a year ago

To know more about bootstrap navbar check this site @k r harsha

Collectives™ on Stack Overflow

How to create a navigation bar dynamically in javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related