Question

我有一个代码，可以在代码运行的java脚本代码的帮助下动态创建导航栏。

＆＃13;

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

＆＃13;

我获得了部分输出。这就是<ul>元素和<li>元素刚刚列出，导航栏无法创建。我还能做些什么来使我的代码更好。提前谢谢。

Answer 1

试试这个

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

在Fiddle

中查看此内容

如何在javascript中动态创建导航栏

1 个答案: