怎么在一个节点后加一段文本节点，要支持html

<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
<script>
function $(o){return document.getElementById(o)}

var s = '<span style="color:red">123</span>';

$('a').nextSibling.nodeValue = s;

</script>
</body>
</html>
上面的代码不行，，ff下可以添加 <span style="color:red">123</span>
ie下没效果我想让添加的内容是真正的html，而不是被转义了的。还有通过 createTextNode 也不行，求高手

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

$('a').nextSibling.innerHTML = s;
这样呢。
        <script>
            function $(o) { return document.getElementById(o) }
            var span = document.createElement("span");
            span.setAttribute("style", "color:red");
            span.innerHTML = "123";
            document.body.insertBefore(span, $("b"));
        </script>
火狐的话用楼上的，IE下可以用var el = document.getElementById("a");
el.insertAdjacentHTML("afterEnd", "<span style='color'>11111</span>")
上面都不是很准确，
我想实现一个外部前置str的函数<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
<script>
function $(o){return document.getElementById(o)}

function before( elem, str ){
elem.previousSibling.nodeValue = str;
}

var s = '<span style="color:red">123</span>';

before( $('c'), s )
before( $('d'), s )
</script>
</body>
</html>
前置。。el.insertAdjacentHTML("beforeBegin", "<span style='color'>11111</span>")
高手 insertAdjacentHTML 只能在ie下运行啊。
高手
            var s = '<span style="color:red">123</span>';

            before( $('c'), s )
这个 s 字符串是不确定的，有时有是html元素，有时仅仅是 test123 这样的字符串，span.setAttribute("style", "color:red");
这样定死了也不好，那 str 是这样的呢。 <span id="test" class=""....></span>
岂不是还要 span.setAttribute("id", ); 。。等等？
用jquery 来处理文档吧

    要不能用的话就做个中间量  把要插入的文字提前就好了？
<!doctype html>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <div id="a">a</div>
        <div id="b">b</div>
        <div id="c">c</div>
        <div id="d">d</div>
        <script>
            function $(o){return document.getElementById(o)}

            var a = $('a'),
             newSpan = document.createElement('span');
            newSpan.style.color = "red";
            newSpan.innerHTML = "123";
            a.parentNode.insertBefore(newSpan, a.nextSibling);
        </script>
    </body>
</html>
<!doctype html>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <div id="a">a</div>
        <div id="b">b</div>
        <div id="c">c</div>
        <div id="d">d</div>
        <script>
            function $(o){return document.getElementById(o)}

            function after(elem, str){
             var newSpan = document.createElement('div');
             newSpan.innerHTML = str;
             elem.parentNode.insertBefore(newSpan, elem.nextSibling);
            }
            after($('a'),  '<span style="color:red">123</span>');
        </script>
    </body>
</html>
大侠你这样会多以个额外的 div我的意思仅仅前置的仅仅是 str的内容就好像 jquery的 prepend
$('#a').prepend('<span style="color:red">123</span>')
说错了是 before 。
就好像 jquery的 before
$('#a').before('<span style="color:red">123</span>')
外部前置。怎么实现？
<!doctype html>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <div id="a">a</div>
        <div id="b">b</div>
        <div id="c">c</div>
        <div id="d">d</div>
        <script>
            function $(o){return document.getElementById(o)}

            function before(elem, str){
             var newdiv = document.createElement('div');
             newdiv.innerHTML = str;
             elem.parentNode.insertBefore(newdiv.children[0], elem);
            }

            function after(elem, str){
             var newdiv = document.createElement('div');
             newdiv.innerHTML = str;
             elem.parentNode.insertBefore(newdiv.children[0], elem.nextSibling);
            }
            before($('a'),  '<span style="color:green">before</span>');
            after($('a'),  '<span style="color:red">after</span>');

        </script>
    </body>
</html>
改进下，也支持纯文本<!doctype html>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <div id="a">a</div>
        <div id="b">b</div>
        <div id="c">c</div>
        <div id="d">d</div>
        <script>
            function $(o){return document.getElementById(o)}

            function before(elem, str){
             var newdiv = document.createElement('div');
             newdiv.innerHTML = str;
             var child = newdiv.children;
             newElem = child.length == 0 ? document.createTextNode(str) : child[0];
             elem.parentNode.insertBefore(newdiv.children[0], elem);
            }

            function after(elem, str){
             var newdiv = document.createElement('div');
             newdiv.innerHTML = str;
             var child = newdiv.children;
             newElem = child.length == 0 ? document.createTextNode(str) : child[0];
            elem.parentNode.insertBefore(newElem, elem.nextSibling);
            }
            before($('a'),  '<span style="color:green">before</span>');
            after($('a'),  'after');

        </script>
    </body>
</html>