指定id里插入多层元素，每次都从开始的地方插，怎么写呢？

用appendChild插入的顺序，order是 0 1 2 3

<div id ='aa'>
    <!--每次都要插入的html结构-->
    <div id='bb' order='0'>
        <div id='cc'></div>
        <div id='cc1'></div>
    </div>
    
    <!--每次都要插入的html结构-->
    <div id='bb' order='1'>
        <div id='cc'></div>
        <div id='cc1'></div>
    </div>
    
    <!--每次都要插入的html结构-->
    <div id='bb' order='2'>
        <div id='cc'></div>
        <div id='cc1'></div>
    </div>
</div>

用什么方法，每次插入都从头呢？也就是order是3 2 1 0

<div id ='aa'>
    <!--每次都要插入的html结构-->
    <div id='bb' order='2'>
        <div id='cc'></div>
        <div id='cc1'></div>
    </div>
    
    <!--每次都要插入的html结构-->
    <div id='bb' order='1'>
        <div id='cc'></div>
        <div id='cc1'></div>
    </div>
    
    <!--每次都要插入的html结构-->
    <div id='bb' order='0'>
        <div id='cc'></div>
        <div id='cc1'></div>
    </div>
</div>

order是我自定义的一个下标，方便大家理解我想实现什么
另外想知道原生JS的方法，JQ暂时不用，虐自己一下

javascript

阅读 2.7k

5 个回答

mememe

✓ 已被采纳

插入到前面用insertBefore，但是插入的里面没有子节点的话好像是会报错

<body>
        <div id="aa"></div>
        <input id="add" type="button" value="添加" />
    </body>
    <script type="text/javascript">
        
        function getId(id){
            return document.getElementById(id);
        }
        
        var add = getId("add"),
              aa = getId("aa"),              
              i=0;
              
        add.onclick=function(){
            ++i;
            var div1=document.createElement("div");
            div1.id="cc";
            
            var div2=document.createElement("div");
            div2.id="cc1";
            
            var divBox=document.createElement("div");
            divBox.id="bb"+i;
            divBox.appendChild(div2);
            divBox.appendChild(div1);
            
            if(i<2){
                aa.appendChild(divBox);
            }else{
                aa.insertBefore(divBox,getId("bb"+(i-1)));
            }            
            
        };
        
    </script>

还有一点id要唯一，js只能操作一个