指定位置创建节点


<html> 
<herd> 
<script type="text/javascript"> 
<!-- 
i=1;
        function AddDiv() { 
           id="box"+i
           i++;
这里的ID是递增的，我想用检测如果ID存在则+1再进行检测 否则..
        } 
                function to_f_a(str) { 
           
        } 
//--> 
</script> 
</herd> <body>
<input type="button" value="添加DIV" onclick="AddDiv()" />
以下节点是通过JS动态创建的！
<!--<div id="box1" onclick="to_f_a("box1")"> 
被点击后的效果--><div id="box1" onclick="to_f_a("box1")">当点击这里这个DIV前面添加一个DIV</div>
<div id="box2" onclick="to_f_a("box2")">添加一个DIV</div>
<div id="box3" onclick="to_f_a("box3")">添加一个DIV</div>
<div id="box4" onclick="to_f_a("box4")">添加一个DIV</div>
<div id="box5" onclick="to_f_a("box5")">添加一个DIV</div>
</body> 
</html>

解决方案 »

  1.   

    document.createElement(...)
    elem.appendChild()
      

  2.   

    参考insertAdjacentHTML或insertAdjacentElement这两个方法。
    不过仅支持IE，FF下要用的话可以搜索一下。这里提供一下我正在用的。
    window.insertHTML = function(where, el, html){
    if(el.insertAdjacentHTML){
    switch(where){
    case "BeforeBegin": el.insertAdjacentHTML(where, html); return el.previousSibling; break;
    case "AfterBegin": el.insertAdjacentHTML(where, html); return el.firstChild; break;
    case "BeforeEnd": el.insertAdjacentHTML(where, html); return el.lastChild; break;
    case "AfterEnd": el.insertAdjacentHTML(where, html); return el.nextSibling; break;
    }
    throw '未知的插入点 -> "' + where + '"';
    }else{
    var range = el.ownerDocument.createRange(); var frag;
    switch(where){
    case "BeforeBegin": range.setStartBefore(el); frag = range.createContextualFragment(html); el.parentNode.insertBefore(frag, el); return el.previousSibling; break;
    case "AfterBegin": if(el.firstChild){range.setStartBefore(el.firstChild); frag = range.createContextualFragment(html); el.insertBefore(frag, el.firstChild); return el.firstChild;}else{el.innerHTML = html; return el.firstChild;} break;
    case "BeforeEnd": if(el.lastChild){range.setStartAfter(el.lastChild); frag = range.createContextualFragment(html); el.appendChild(frag); return el.lastChild;}else{el.innerHTML = html; return el.lastChild;} break;
    case "AfterEnd": range.setStartAfter(el); frag = range.createContextualFragment(html); el.parentNode.insertBefore(frag, el.nextSibling); return el.nextSibling; break;
    }
    throw '未知的插入点 -> "' + where + '"';
        }
    }
      

  3.   

    了解了insertAdjacentHTML或insertAdjacentElement这两个方法
      

  4.   

    <!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>
        <title>无标题页</title>
        <script type="text/javascript">
        function CreateDiv()
        {
          var oDiv=document.createElement("div");
          var text=document.createTextNode("ws_hgo");
          oDiv.appendChild(text);
          document.body.appendChild(oDiv);
        }
        </script>
    </head>
    <body>
        <input id="Button1" type="button" value="创建Div" onclick="CreateDiv()" />
    </body>
    </html>
      

  5.   

    setAttributevar echkbox=document.createElement("input");
    echkbox.setAttribute("type","checkbox");
    echkbox.setAttribute("id","inputid");
    echkbox.setAttribute("name","inputname");
    echkbox.setAttribute("value","inputvalue");
    echkbox.setAttribute("checked","checked");
    var addhere=document.getElementById("someElementId");
    addhere.appendChild(echkbox);