Javascript onclick事件以写入新div_Javascript_Onclick_Document.write

Javascript onclick事件以写入新div

javascript

Javascript onclick事件以写入新div,javascript,onclick,document.write,Javascript,Onclick,Document.write,我似乎不明白为什么这不起作用。我在a href上有一个onclick事件，它应该触发一个javascript函数来编写一个新的div。任何帮助都将不胜感激我很确定我的问题在于链接，而不是函数 <html> <head> <title>Blah</title> <style type="text/css"> .box { position: fixed; z-index: 5;

我似乎不明白为什么这不起作用。我在a href上有一个onclick事件，它应该触发一个javascript函数来编写一个新的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>


废话
.盒子{
位置：固定；
z指数：5；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,8）；
填充：25px 10px 25px 10px；
}
.内容{
z指数：1；
填充：25px 15px 10px 15px；
}
功能测试（）{
文件。编写（“方框测试”）；
}
测试页

希望对你有帮助，马丁

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

废话 .盒子{ 位置：固定； z指数：5；宽度：100%；身高：100%；背景色：rgba（0,0,0,8）；填充：25px 10px 25px 10px； } .内容{ z指数：1；填充：25px 15px 10px 15px； } 功能测试（）{ 文件。编写（“方框测试”）； } 测试页看

更新至

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

缺失妄想症

注意：我更喜欢使用“javascript:；”而不是“#”，以防止页面向上滚动一种方法，并且我已经远离了内联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);
    };
}

var d=document，
as=d.getElementsByTagName（'a'）；
功能测试（elem、evt）{
evt.preventDefault（）；
var div=d.createElement（'div'），
tN=d.createTextNode（elem.firstChild.nodeValue），
b=d.getElementsByTagName（'body'）[0]；
儿童分部（tN）；
b、 insertBefore（div，elem.parentNode）；
}
对于（var i=0，len=as.length；ihorrible JS，顺便说一句。你应该调用该函数，即test（）
，这不是向页面添加HTML的正确方法。你们两个非常有帮助，嗯..y告诉你JS代码很糟糕是没有帮助的？+，调用该测试函数你真的忘了放置（）。看这里……在David Thomas的回答中，你会找到解决这样一个问题的正确方法……祝你有愉快的一天！没关系。它可以像“#”一样。我放“javascript:；”是为了防止页面滚动到顶部。你也可以用“#”我想他只是想强调一下（让它们加粗）在括号里。他只是新来的！@Adriano:是的，对。代码编辑器很混乱：）谢谢你的理解！
<a onclick="test()" href="javascript:;">Test Test Test</a>

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);
    };
}

<h1>Test Page</h1>

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