在文本末尾移动div

时间:2012-06-10 19:17:08

标签: javascript html css

我有以下代码:

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

我想按照以下<li>This is a test | div item1 | div item2 | div item3 </li>

安排

是否可以在不使用javascript的情况下执行此操作?只有css?如果没有,你能用javascript提供样本吗?

由于

3 个答案:

答案 0 :(得分: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 );   
    }
}

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

将HTML设置为:

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

然后申请

​li div {
    display: inline-block;
    padding: 0 1ex;
    border-left: 1px solid black;     
}​

选项二:在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>​
​li .container {
    float: right;
}​
​li .container div {
    float: left;
    margin-right: 5px;
}​