js 鼠标点击动态插入一个input

jsjquery

解决方案 »

  1.   

    jQuery动态添加 <div  onclick="ckInput(this)"></div>
    <div  onclick="ckInput(this)"></div>
    <div  onclick="ckInput(this)"></div>
    <div  onclick="ckInput(this)"></div>
    <div  onclick="ckInput(this)"></div>
    <div  onclick="ckInput(this)"></div>
    function ckInput(obj){
    jQuery(obj).append("<input/>");
    }
      

  2.   

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>jQuery 点击变色</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script> 
    </head>
    <style type="text/css">
    html,body{height:100%; width:100%}
    .divname{width:100%;height:100%; background: red;position:absolute;}
    </style>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".divname").click(function(e){
    var offsetLeft = e.clientX+"px";
    var offsetTop = e.clientY+"px";
    $("<input class='input' style='position:absolute;top:"+offsetTop+";left:"+offsetLeft+";'>").appendTo(this);
    });
    });
    </script>
    <body>
    <div class="divname"></div>
    </body>
    </html>
      

  3.   


    谢谢，确实是个好的思路。
    <body>
    <div class="divname">
        <div id="id1"' class="id1class">
        <div id="id2"' class="id1class">
        <div id="id3"' class="id1class">
    </div>
    </body>
    像上面这种结构，我怎么在id1和id2之间，或者是在id2和id3之间插入一个<div> <input id="input1" name="input1"> </div>