在input后面动态添加div

大家好！
    我遇到这样一个问题，不知道怎么去解决。如代码：
    <body onload="init();">
       <input type="text" id="txt"/><br/>
       <!--<div></div>-->//这是注释的
       <input type="text" id="txt1"/>
   </body>
   我怎么能动态添加一个div放在那注释上的位置呢？我的意思是加一个div位置兼容问题。我添加div却不是我想要指定的位置。
   我在js中写的是这样：
   <script>
    function init(){
       var objDiv = document.createElement('DIV');
        document.body.appendChild(objDiv);
   }
   </script>
但位置却是在后面，不是我想要的位置。如何实现呢？请大家帮忙解决。谢谢

解决方案 »

  1.   

    var objDiv = document.createElement('DIV'); 
    var txt = document.getElementById("txt1");
    txt.parentNode.insertBefore(objDiv,txt);
      

  2.   

    var objdiv=document.createElemetn("Div1");
    var txt=document.getElementID("txt1");
    txt.parentNode.insertBefore(objdiv,txt);
    还可以啊!
      

  3.   

    或者在要加的地方先做个DIV或者SPAN
    然后再加到这个DIV或者SPAN里也行.
    当然.也可以直接用replaceChild之类换掉.
      

  4.   

    function getAbsoluteTop(obj){
    var top = obj.offsetTop;
    while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != 'BODY'){
    top += obj.offsetParent.offsetTop;
    obj = obj.offsetParent;
    }
    return top;
    }
    function getAbsoluteLeft(obj){
    var left = obj.offsetLeft;
    while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != 'BODY'){
    left += obj.offsetParent.offsetLeft;
    obj = obj.offsetParent;
    }
    return left;
    }
    function getAbsoluteWidth(obj){
    return obj.offsetWidth;
    }
    function getAbsoluteHeight(obj){
    return obj.offsetHeight;
    }
    //objDoc是对于那个var objDoc = document.getElementById("txt1"); 
    function divPosition(objDoc){
    objDiv.style.left = getAbsoluteLeft(objDoc);
    objDiv.style.top = getAbsoluteTop(objDoc)+getAbsoluteHeight(objDoc);
    objDiv.style.width = getAbsoluteWidth(objDoc);
    }
      

  5.   

    var objdiv=document.createElemetn("Div1"); 
    var txt=document.getElementID("txt1"); 
    txt.parentNode.insertBefore(objdiv,txt); 
      

  6.   

    是这样的效果么？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style>
    .div{ background-color:#66CCFF; border:1px solid #006699;margin:4px;vertical-align:middle; width:180px; text-align:center;overflow: hidden;padding-top:10px; padding-bottom:10px;}
    .addDV{ border:1px solid #339933; background-color:#99FF66; width:120px; height:20px;}
    </style>
    </head>
    <body> 
     <input type="button" id="btn" value="弹出层" onclick="pop()">
         <div class="div" id="one"><input type="text" id="txt"/></div><br />
         <div class="div"><input type="text" id="txt1"/></div>
     
    </body> </html>
    <script>
    //弹出层
    function pop()
    {
    var arr=new Array();
    arr= getObj("one");
    var dv=document.createElement("div");
    dv.setAttribute("id","Notes");
    dv.setAttribute("class","addDV");
    document.body.appendChild(dv);
    Note = document.getElementById('Notes');
    Note.innerHTML="i'm here!";
    if(typeof(Note) == 'undefined')
    {
    alert("err")
    }
    Note.style.position="absolute";
    Note.style.left=arr[0]+"px";
    Note.style.top= (arr[1]+45)+"px";
    document.getElementById('btn').disabled=true;
    }
    //计算层坐标
    function getObj(id)
        {
            var element=document.getElementById(id)
            var x = element.offsetLeft;
            var y =element.offsetTop;
            var rect=[0,0];
            var el = element;
        while(el!=null && el!=document.body)
        {
            rect[0]=rect[0]+el.offsetLeft;
            rect[1]=rect[1]+el.offsetTop;
            el=el.offsetParent;
        }
        x = rect[0];
        y = rect[1];
        var m = new Array()
        m[0]=x;
        m[1]=y;
        return m;
        }
    </script>  
      

  7.   

    在IE下看，改了下，上面那个在ff下比较正常<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style>
    .div{ background-color:#66CCFF; border:1px solid #006699;margin:4px;vertical-align:middle; width:180px; text-align:center;overflow: hidden;padding-top:10px; padding-bottom:10px;}
    .addDV{ border:1px solid #339933; background-color:#99FF66; width:120px; height:20px;}
    </style>
    </head>
    <body> 
     <input type="button" id="btn" value="弹出层" onclick="pop()">
         <div class="div" id="one"><input type="text" id="txt"/></div><br />
         <div class="div"><input type="text" id="txt1"/></div>
     
    </body> </html>
    <script>
    //弹出层
    function pop()
    {
    var arr=new Array();
    arr= getObj("one");
    var dv=document.createElement("div");
    dv.setAttribute("id","Notes");
    dv.setAttribute("class","addDV");
    document.body.appendChild(dv);
    Note = document.getElementById('Notes');
    Note.innerHTML="i'm here!";
    if(typeof(Note) == 'undefined')
    {
    alert("err")
    }
    Note.style.border="1px solid #339933";
    Note.style.backgroundColor="#99FF66";
    Note.style.position="absolute";
    Note.style.left=(arr[0]+10)+"px";
    Note.style.top= (arr[1]+62)+"px";
    document.getElementById('btn').disabled=true;
    }
    //计算层坐标
    function getObj(id)
        {
            var element=document.getElementById(id)
            var x = element.offsetLeft;
            var y =element.offsetTop;
            var rect=[0,0];
            var el = element;
        while(el!=null && el!=document.body)
        {
            rect[0]=rect[0]+el.offsetLeft;
            rect[1]=rect[1]+el.offsetTop;
            el=el.offsetParent;
        }
        x = rect[0];
        y = rect[1];
        var m = new Array()
        m[0]=x;
        m[1]=y;
        return m;
        }
    </script>  
      

  8.   

    有关iframe浮动问题，我当时想作个浮动页面，
    但不能加载一个html页面，当时在csdn中提过问，没有人帮我解决。
    后来自己发了好长的时间解决了。
    可以在iframe中创建页面实现，可以不用加载页面。
    var ifrm = document.getElementById("iframe");
    ifrm.contentWindow.document.write("......");
    这种形式可以创建一个html了。
      

  9.   


    请参考：
    http://topic.csdn.net/u/20090604/13/05819f03-724d-4e5e-8378-6f5213e1a34f.htmldiv模拟下拉，还是比较容易的