如何根据div的css名称在div后插入一个div

我有如下div布局
<div class="mybox">div1<div>
<div class="mybox">div2<div>希望在所有css 为mybox后变为动态插入<div class="newcss">insert<div>
<div class="mybox">div1<div>
<div class="newcss">insert<div>
<div class="mybox">div2<div>
<div class="newcss">insert<div>我知道jQuery实现这个功能很方便，但是项目需要，这里不能用jQuery实现，也不能更改程序，只能在运行中动态插入，希望大家帮帮忙

解决方案 »

  1.   

    $("mybox").after("<div class='newcss'>insert<div>")
      

  2.   

    $(".mybox").after("<div class='newcss'>insert<div>")
      

  3.   

    我已经说明这里不允许用jQuery实现，不知道不要乱回帖
      

  4.   

    JS直接实现的话只能用遍历判断 className == "mybox" 了，如果class="mybox"的都是div且在同一父节点下，会少遍历一些。比如可以遍历
    document.getElementById("父id").getElementByTagName("DIV")
    这个数组判断className是否=="mybox"插入的话，如果<div class="newcss">insert<div>是动态生成的DOM对象，可以使用
    父节点(DOM对象).insertBefore(insert节点(DOM对象), 某mybox节点(DOM对象).nextSibling)
    这个方法如果是"<div class="newcss">insert<div>"这样的字符串，可以使用// 浏览器通用的_insertHtml方法
    // 参数: where：插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。
    //          el：用于参照插入位置的html元素对象
    //          html：要插入的html代码
    // 返回: 根据html代码创建的新对象
    function _insertHtml(where, el, html){       
        where = where.toLowerCase();       
        if(el.insertAdjacentHTML){       
            switch(where){       
                case "beforebegin":       
                    el.insertAdjacentHTML('BeforeBegin', html);       
                    return el.previousSibling;       
                case "afterbegin":       
                    el.insertAdjacentHTML('AfterBegin', html);       
                    return el.firstChild;       
                case "beforeend":       
                    el.insertAdjacentHTML('BeforeEnd', html);       
                    return el.lastChild;       
                case "afterend":       
                    el.insertAdjacentHTML('AfterEnd', html);       
                    return el.nextSibling;       
            }       
            throw 'Illegal insertion point -> "' + where + '"';       
        }       
        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;       
             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;       
                 }       
            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;       
                }       
            case "afterend":       
                range.setStartAfter(el);       
                frag = range.createContextualFragment(html);       
                el.parentNode.insertBefore(frag, el.nextSibling);       
                return el.nextSibling;       
        }       
        throw 'Illegal insertion point -> "' + where + '"';       
    }这个方法
      

  5.   

    纠正5L，是getElementsByTagName不是getElementByTagName
      

  6.   

    <html>
     <head>
    <script type="text/javascript">
    function Add()
    {
           ds = document.getElementsByTagName("div")
       for(i=0;i<ds.length;i++)
       { 
       if(ds[i].className == "mybox")
     
       {
       div=document.createElement("div")
     
       div.className="newcss"
       div.innerHTML="xxxx" ds[i].parentNode.insertBefore(div, ds[i].nextSibling);
    }
    }
     
    }
      </script>
     </head>
    <body onclick="Add()">
    <div class="mybox">div1</div>
    <div class="mybox">div2</div>
    </body>
    </html>
      

  7.   

    var divs=document.getElementsByTagName("div")
    for(var i=0;i<divs.length;i++)
    {
    if(divs[0].getAttribute("css")=="mybox")
    divs[0].outertHTML+=<div class='newcss'>insert<div>
    }
      

  8.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body><div class="mybox">div1</div>
    <div class="mybox">div2</div>
    </body>
    <script>
    function insertAfter(newEl, targetEl)
            {
                var parentEl = targetEl.parentNode;
                
                if(parentEl.lastChild == targetEl)
                {
                    parentEl.appendChild(newEl);
                }else
                {
                    parentEl.insertBefore(newEl,targetEl.nextSibling);
                }            
            }(function appElement(){
     var obj=document.getElementsByTagName("div");
     var htmlSpan = document.createElement("div");
      htmlSpan.setAttribute('newcss', 'class');
      htmlSpan.innerHTML = "insert";
     
      for(var i=0;i<obj.length;i++)
     {
       if(obj[i].className=="mybox")
         {
     alert(i);
     insertAfter(htmlSpan,obj[i]);} 
     }
     })();
    </script>
    </html>
      

  9.   

    可以稍微修改就可以自动运行
    <script type="text/javascript">
    （function Add()
    {
          ds = document.getElementsByTagName("div")
          for(i=0;i<ds.length;i++)
          { 
              if(ds[i].className == "mybox")
     
              {
                  div=document.createElement("div")
                  div.className="newcss"
                  div.innerHTML="xxxx"
                ds[i].parentNode.insertBefore(div, ds[i].nextSibling);
            }
        }
     
    })();
      </script>