javascript noob ...文档写入答案

【问题标题】：javascript noob... document writejavascript noob ...文档写入
【发布时间】：2011-07-09 22:12:43
【问题描述】：

我正在尝试使用 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>

谁能推荐一个相关的教程或给我一个提示？

【问题讨论】：

学习 JavaScript 的好资源：developer.mozilla.org/en/JavaScript/Guide
它不起作用 :) 链接只会闪现一个新页面，其中包含我最初想要放置在导航中的单词

标签： javascript navigation

【解决方案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 />";
}

【讨论】：

啊，完美的作品，非常感谢！一个问题，如何在css中设置innerHTML中包含的各个链接的样式？我在获取任何样式的链接时遇到了麻烦，他们现在似乎有自己的想法:) 并且将鼠标悬停在一个正在改变所有样式... innerHTML 没有放在是吗？再次感谢，非常感谢lelleny.co.uk/home
是的，都是放在moreText span中的。要单独设置样式，只需将您自己的 HTML 标记或 CSS 类添加到您添加的 HTML 中。然后，您可以像使用 CSS 控制 HTML 页面的任何其他部分一样控制样式。放入带有类 ID 或任何其他 HTML 标记的 span。

【解决方案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);
}

【讨论】：

【解决方案3】：

请参阅 WSC 的 Creating and modifying HTML

【讨论】：

【解决方案4】：

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

但这是错误的：

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

您已使您的a 自动关闭，因此“集合”不是链接的一部分，</a> 是孤立的/无效的。因此，当您单击“集合”时，您的函数不会触发。

写：

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

【讨论】：

【解决方案5】：

您始终可以使用 innerHTML 功能。

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

所以你的 HTML 看起来像：

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

因此，您要在导航下方插入的文本将在“一些元素”中弹出。您还可以修改 css 以执行显示/隐藏类型技术。

【讨论】：