Question

我正在尝试使用Javascript在my nav bar中加载更多链接。

这就是我的尝试;我只想在导航栏中添加一个链接，以便在其下方加载更多内容。

<a href="" onclick="show()"/>collections</a>
<script type="text/javascript">
function show() {
   document.write("collection 1 <br /> collection 2 <br /> etc... <br />");
}
</script>

有人可以建议相关的教程或给我一个提示吗？

Answer 1

document.write应该只在文档加载时使用。加载文档后调用它将清除当前文档并写入一些新内容。要向页面添加新内容，您需要创建新的DOM对象并将其添加到页面或修改现有的DOM对象。

以下是修改您在此处可以看到的页面的一个小示例：http://jsfiddle.net/jfriend00/zVS39/

HTML：

<a href="#" onclick="show()">collections</a>
<span id="moreText"></span>

使用Javascript：

function show() {
    var o = document.getElementById("moreText");
    o.innerHTML = "<br>collection 1 <br /> collection 2 <br /> etc... <br />";
}

Answer 2

您可以使用innerHTML，或者如果您想要更复杂的东西，可以添加新元素，例如：

HTML

<a href="" onclick="show()">collections</a>
<div id="hidden"></div>

的Javascript

function show() {
var hidden= document.getElementById("hidden"),
    newElem = document.createElement("div");

newElem.innerHTML = "<br>collection 1 <br /> collection 2 <br /> etc... <br />";
newElem.style.color = "red";
hidden.appendChild(newElem);
}

Answer 3

请参阅WSC的Creating and modifying HTML

Answer 4

您没有告诉我们您的问题是什么。

但这是错误的：

<a href="" onclick="show()"/>collections</a>

您已将a自我关闭，因此“集合”不属于该链接，</a>是孤立/无效的。因此，单击“集合”时，您的功能不会触发。

写：

<a href="" onclick="show()">collections</a>

Answer 5

您始终可以使用innerHTML功能。

document.getElementById('someelement').innerHTML = "collection 1</br>collection2 ...";

所以你的HTML看起来像是：

<div id = "nav"></div>
<div id = "someelement></div>

因此，您想在导航下方插入的文字会弹出“somelement”。您还可以修改css以执行显示/隐藏类型技术。

javascript noob ...文件写

5 个答案: