setAttribute to var string in Javascript

Question

我想在下面的每个变量中添加一个链接字符串并添加到我的 HTML 中，我唯一拥有的就是一个设置了 ID 的简单div。

var home = "Home";
var news = "News";
var contact = "Contact";
var about = "About";
document.getElementById("myTopnav").innerHTML = home + " " + news + " " + contact + " " + about;

<div class="topnav" id="myTopnav">
</div>

如您所见，它是一个菜单，我只想使用 JavaScript 创建一个。

Answer 1

看起来你才刚刚开始，所以我建议以可维护的方式开始。在列表中定义菜单项，而不是单个变量，然后单步执行并追加a标记。喜欢这个：

var menuItems = [{
        name:"Home",
        link:"/home"
    },
    {
        name:"News",
        link:"/news"
    },
    {
        name:"Contact",
        link:"/contact"
    },
    {
        name:"About",
        link:"/about"
    }]
var menu = document.getElementById("myTopnav")
for(var i = 0; i < menuItems.length; i++) {
    var link = document.createElement('a');
    var linkText = document.createTextNode(menuItems[i].name);
    link.appendChild(linkText);
    link.href = menuItems[i].link;
    menu.appendChild(link);
}

#myTopnav a{
        margin-left: 10px
    }

<div class="topnav" id="myTopnav"></div>

Answer 2

<div class="topnav" id="myTopnav"></div>
<script>
var links = [
  ['Home', '/'],
  ['News', '/news/'],
  ['Contact', '/contact/'],
  ['About', '/about/']
];
function makeNav( links ) {
  var nav = document.getElementById('myTopnav');
  for ( var i = 0; i < links.length; i++ ) {
    nav.innerHTML += '<a href="' + links[i][1] + '">' + links[i][0] + '</a>';
  }
  return nav;
}
makeNav( links );
</script>

Answer 3

您可以将元素包装在 html 标签中，例如 <a></a> or <li><a></a></li> .

document.getElementById('myTopnav').innerHTML = '<a href="#">' + home + '</a>' + ...