jquery - How to create a navigation bar dynamically in javascript

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

Share Improve this question asked Jul 25, 2017 at 4:12 user8265273

Possible duplicate of How to dynamically add a navbar to a jQuery Mobile application – 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 Commented Jul 25, 2017 at 4:32

Add a ment |

1 Answer 1

Sorted by: Reset to default 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./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

Programmer puzzle solving

jquery - How to create a navigation bar dynamically in javascript - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)