Javascript 在文本末尾移动一个div

我有以下代码：

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

这是
项目1
项目3
项目2
测验
​

我想将li安排如下

这是一个测试| div item 1 | div item 2 | div item 3

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

---

谢谢

您可以使用以下js代码更改Html标记的内部Html：

document.getElementById("yourliid").innerHTML = "new value of html that you want"

---

将HTML设置为：

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

---

选项二：在HTML周围添加包装器div：

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

---

​

你能发布一些你的CSS，并用一张图片来解释你想要的结果吗？请考虑将您的代码发布在上，我们将进行查看。“全文”是从哪里来的？尝试使用以下链接：和。为什么“全文”最初在您的

li

中拆分？@salamis:那么为什么不将其作为您的预期结果！？我能用css做上面描述的事情吗？@salamis:为什么你的HTML看起来像这样？你能在三个内分区周围加上一个包装分区吗？没有。我以前跟你解释过。因为我解析一个bib文件。@萨拉米斯：什么是

.bib

文件？你用什么来解析它？为什么不将html作为解析步骤的一部分移动，而不是稍后在javascript中移动？

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

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 );   
    }
}