setAttribute to var string in Javascript

-4

我想添加到下面的每个var链接字符串和我的HTML我唯一的东西是一个简单的div与ID集。setAttribute to var string in Javascript

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。

来源

2017-10-21 Andrei Ref

你所说的 “一个链接字符串，然后进入我的HTML” 是什么意思？链接标签？ – iagowp

我希望每个var都有一个链接到一个页面，就像一个菜单 –

你发布的链接似乎并不关注他@msanford。他想在香草js中做到这一点，而不是jQuery – iagowp

它看起来像你刚刚开始，所以我建议以可维护的方式开始。在列表中定义菜单项，而不是单个变量，然后逐步添加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>

来源

2017-10-21 18:55:29

这太棒了。你是对的，我刚开始:) –

您可以将自己的元素封装在诸如<a></a> or <li><a></a></li>之类的html标记中。

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

来源

2017-10-21 18:47:45 sklart

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

来源

2017-10-21 19:02:06

我不希望它作为一个列表。我想正常在1个酒吧 –

好吧。现在编辑到平板清单 –

伟大的工作很好 –

setAttribute to var string in Javascript

回答

相关问题