js为当前元素添加父节点

现在有一些元素<select>,想在<select>元素前动态添加一个<span style="border: 1px solid red">元素。
用DOM该如何做？

解决方案 »

  1.   

    elem.insertAdjacentHTML("beforeBegin","<span style=\"border: 1px solid red\">*</span>");
      

  2.   

    select元素的前面<span style="border: 1px solid red">
    <select></select>像这样？
    JQuery:$("select").before("<span style="border: 1px solid red">");
      

  3.   


    原本的效果是这样的
    <select></select>
    DOM操作后的代码是下面这样：
    <span style="border: 1px solid red"><select></select></span>遍历页面中所有的select元素在这里我省略了。其实我这样做是为了解决IE下select元素无法通过css样式直接设置边框的问题。
      

  4.   

    $("select").wrap("<span style="border: 1px solid red"></span>");
      

  5.   

    那就在select前面插入span，然后设置select为span的子元素。
      

  6.   

    elem.insertAdjacentHTML("beforeBegin", "<span style=\"border: 1px solid red\">");
    elem.insertAdjacentHTML("afterend", "</span>");
      

  7.   

    <!doctype html>
    <html>
    <head>
    <title>Test</title>
    </head>
    <body>
    <select>
    <option value="1">First</option>
    </select>
    <script>
    var sel = document.getElementsByTagName("select")[0],
    _sel = sel.cloneNode(true),
    span = document.createElement("span");
    span.style.border = "1px solid red";
    //span.style.cssText = "border: 1px solid red";
    span.appendChild(_sel);
    sel.parentNode.replaceChild(span, sel);
    </script>
    </body>
    </html>
      

  8.   


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    </style>
    </head>
    <body>
    <span id="a">span</span>
    <br /><br />
    <span id="b">span</span>
    <script>
    function $(el){
    return typeof el == 'string' ? document.getElementById(el) : el;
    }

    var wrap = function(el, v){
    if(typeof v == 'string'){
    var tmp = document.createElement('div');
    tmp.innerHTML = v;
    tmp = tmp.children[0];
    var _el = el.cloneNode(true);
    tmp.appendChild(_el);
    document.body.replaceChild(tmp, el);
    }else{
    var _el = el.cloneNode(true);
    v.appendChild(_el)
    document.body.replaceChild(v, el);
    }
    };

    // dom
    var div = document.createElement('div');
    div.innerHTML = 'div';
    wrap($('a'), div);

    //str
    div = '<div style="color:blue"></div>';
    wrap($('b'), div)
    </script>
    </body>
    </html>试试
      

  9.   

    <!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=gb2312" /><html>
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
    <select id="mySelect">
    <option value="1">First</option>
    </select>
    <script type="text/javascript">
    /* var sel = document.getElementsByTagName("select")[0],
    _sel = sel.cloneNode(true),
    span = document.createElement("span");
    span.style.border = "1px solid red"; //span.style.cssText = "border: 1px solid red"; 
    span.appendChild(_sel); 
    sel.parentNode.replaceChild(span, sel);
    */
    $("#mySelect").wrap("<span></span>");
    $("span").css("border","1px solid red");
    </script>
     </body>
     </html>
      

  10.   


    <!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=gb2312" /><html>
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
    <select id="mySelect">
    <option value="1">First</option>
    </select>
    <script type="text/javascript">
    /* var sel = document.getElementsByTagName("select")[0],
    _sel = sel.cloneNode(true),
    span = document.createElement("span");
    span.style.border = "1px solid red"; //span.style.cssText = "border: 1px solid red"; 
    span.appendChild(_sel); 
    sel.parentNode.replaceChild(span, sel);
    */
    $("#mySelect").wrap("<span></span>");
    $("span").css("border","1px solid red");
    </script>
     </body>
     </html>