Javascript onclick 事件写入新的 div答案

【问题标题】：Javascript onclick event to write new divJavascript onclick 事件写入新的 div
【发布时间】：2012-04-25 00:16:52
【问题描述】：

似乎无法弄清楚为什么这不起作用。我在 href 上有一个 onclick 事件，它应该触发一个编写新 div 的 javascript 函数。任何帮助，将不胜感激。

我很确定我的问题出在链接上，而不是功能上。

<html>
<head>
    <title>Blah</title>
    <style type="text/css">
    .box {
        position: fixed;
        z-index: 5;
        width:100%;
        height:100%; 
        background-color: rgba(0,0,0,.8);
        padding:25px 10px 25px 10px;
    }
    .content {
        z-index: 1;
        padding: 25px 15px 10px 15px;
    }
    </style>
</head>

<body>
    <script type="text/javascript">     
        function test() {
            document.write("<div class='box'>Box Test</div>");  
        }
    </script>
    <h1>Test Page</h1>

    <div class="content">
        <a onclick="javascript:test" href="#">Test Test Test</a>
    </div>

</body>
</html>

【问题讨论】：

可怕的 JS，顺便说一句.. 你应该调用那个函数，即test()
这不是向页面添加 HTML 的正确方法。
你们两个太有帮助了
Mmmm.. 告诉你 js 代码很糟糕，你没有帮助吗？ +，要调用该测试功能，您真的忘了输入() .. 见这里jsfiddle.net/hHGnL ...而且，在大卫托马斯的回答中，您会找到解决此类问题的正确方法。 ..祝你有美好的一天！

标签： javascript onclick document.write

【解决方案1】：

一种方法，我已经放弃了内联 JavaScript，以便 a: JavaScript/行为不那么具有侵入性，并且 b: 因此不需要查看每个元素来影响/改变什么发生：

var d = document,
    as = d.getElementsByTagName('a');

function test(elem,evt){
    evt.preventDefault();
    var div = d.createElement('div'),
        tN = d.createTextNode(elem.firstChild.nodeValue),
        b = d.getElementsByTagName('body')[0];
    div.appendChild(tN);
    b.insertBefore(div,elem.parentNode);
}

for (var i=0,len=as.length;i<len;i++){
    as[i].onclick = function(e){
        test(this,e);
    };
}

使用以下 HTML：

<h1>Test Page</h1>

<div class="content">
    <a href="#">Test Test Test</a>
</div>

JS Fiddle demo.

尝试解释Mathletics' comment，问题是您使用的是document.write()，这肯定会写入文档。不幸的是，它覆盖文档本身；所以页面内容被完全替换了。

参考资料：

【讨论】：

【解决方案2】：

<html>
<head>
    <title>Blah</title>
    <style type="text/css">
    .box {
        position: fixed;
        z-index: 5;
        width:100%;
        height:100%; 
        background-color: rgba(0,0,0,.8);
        padding:25px 10px 25px 10px;
    }
    .content {
        z-index: 1;
        padding: 25px 15px 10px 15px;
    }
    </style>
</head>

<body>
    <script type="text/javascript">     
        function test() {
            document.write("<div class='box'>Box Test</div>");  
        }
    </script>
    <h1>Test Page</h1>

    <div class="content">
        <a onclick="test()" href="javascript:;">Test Test Test</a>
    </div>

</body>
</html>

见

<a onclick="javascript:test" href="#">Test Test Test</a>

更新到

<a onclick="test()" href="javascript:;">Test Test Test</a>

缺少括号

注意：我更喜欢使用“javascript:;”而不是“#”，以防止页面滚动到顶部

【讨论】：

没关系。它可以像“#”。我把“javascript:;”为了防止页面滚动顶部。您也可以使用“#”

【解决方案3】：

<a onclick="javascript:test**();**" href="#">Test Test Test</a>

希望对你有帮助，马丁

【讨论】：

我猜他只是想把重点（使它们加粗）放在括号上。他是新来的！
@Adriano：是的，没错。代码编辑器很混乱 :) 感谢理解！