Javascript onclick事件写入新div

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

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

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

来源

2012-04-24 ENev

可怕的JS，btw ..你应该**调用**该函数，即'test（）' – stecb 2012-04-24 15:38:12

这不是正确的方式来添加HTML到页面。 – Mathletics 2012-04-24 15:38:34

你们两位如此有帮助 – ENev 2012-04-24 15:43:15

-1

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

希望帮助，马丁

来源

2012-04-24 15:39:14 witti

**有什么用途？ – 2012-04-24 15:41:40

我想他只是试图强调（使他们粗体）括号。他只是新的！ – 2012-04-24 15:43:17

@Adriano：是的。代码编辑器相当混乱:)谢谢理解！ – witti 2012-04-25 15:07:29

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

失踪paranthesis

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

来源

2012-04-24 15:40:04

为什么要改变'href'？ – Mathletics 2012-04-24 15:40:35

没关系。它可以像“＃”一样。我把“javascript :;”以防止页面滚动到顶部。您也可以使用“＃” – 2012-04-24 15:43:16

一种方法，我已经离开了内嵌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()，这肯定会写入文档。不幸的是它覆盖了文件本身;所以页面内容完全被替换。

参考文献：

来源

2012-04-24 16:03:50

Javascript onclick事件写入新div

回答

相关问题