Move a div at the end of the text

Question

I have the following code:

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

I would like to arrange the li as follows <li>This is a test | div item1 | div item2 | div item3 </li>

Is it possible to do that without using javascript? Only css? If not can you provide a sample in javascript?

Thanks

Can you post some of your CSS and explain the desired result with an image or so? Please, considere posting your code on http://jsfiddle.net and we will take a look. — Ricardo Souza, Jun 10 '12 at 19:20
Try and use the following links: [Easiest way to order a ul ol in jQuery](http://stackoverflow.com/questions/304396/what-is-the-easiest-way-to-order-a-ul-ol-in-jquery) and [Sort a list alphabetically](http://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery). — Hybride, Jun 10 '12 at 19:21
why "the whole text" is initially splitted inside your `li`? — davioooh, Jun 10 '12 at 19:23
@Eric because it is derived from a parsed `.bib` file. And the user might enter any element at any position! — glarkou, Jun 10 '12 at 19:25
@salamis: No, I meant why give us an example output that doesn't match the example input? — Eric, Jun 10 '12 at 19:26
@Esailija yes mate. Can you post it as an answer? Even if it is not css I will mark it as correct. — glarkou, Jun 10 '12 at 19:33

score 1 · Accepted Answer · answered Jun 10 '12 at 19:34

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

score 0 · Answer 2 · answered Jun 10 '12 at 19:22

0

you can change inner Html of a html tag by using following js code:

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

answered Jun 10 '12 at 19:22

Maziar Aboualizadehbehbahani

1,976
17
37

Eric · Answer 3 · 2012-06-10T19:40:04.043

0

It'd make more sense to set your HTML to:

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

Then apply

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

Option two: Add a wrapper div around your HTML:

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

edited Jun 10 '12 at 19:40

answered Jun 10 '12 at 19:23

Eric

95,302
53
242
374

http://jsfiddle.net/Q5tDc/ Can I somehow do what is described above with only css? – glarkou Jun 10 '12 at 19:30
@salamis: Why does your HTML look like that? Can you add a wrapper div around the three inner divs? – Eric Jun 10 '12 at 19:32
No mate. I explained you before. Because I parse a bib file. – glarkou Jun 10 '12 at 19:34
@salamis: What is a `.bib` file? What do you parse it with? Why don't you move the html as part of the parsing step, rather than do it in javascript later? – Eric Jun 10 '12 at 19:38

Move a div at the end of the text

3 Answers3