javascript - 在文本末尾移动一个 div

Question

我有以下代码:

<li>This is 
  <div class="item1">item1</div>
  <div class="item3">item3</div>
  <div class="item2">item2</div>
a test</li>​

我想按如下方式排列 li <li>This is a test | div item1 | div item2 | div item3 </li>

不使用 javascript 是否可以做到这一点？只有CSS？如果没有，您能否提供一个 javascript 示例？

谢谢

Answer 1

http://jsfiddle.net/LceqM/

var li = document.getElementById("theli"),
    textNodes = [], first;

var elem = li.firstChild;

while( elem ) {
    if( elem.nodeType === 3 ) textNodes.push(elem);
    elem = elem.nextSibling;
}

if( textNodes.length ) {
    first = textNodes.shift();
    li.insertBefore( first, li.firstChild );

    while( textNodes.length ) {
        li.insertBefore( textNodes.pop(), first.nextSibling );   
    }
}