javascript noob...文档编写

Question

我正在尝试使用 Javascript 在我的导航栏中加载更多链接。

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

<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 中的创建和修改 HTML

Answer 4

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

但这是错误的：

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

您已将 a 设置为自动关闭，因此“collections”不是链接的一部分，并且 是孤立/无效的。因此，当您单击“集合”时，您的函数不会触发。

写：

<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 以执行显示/隐藏类型技术。