Reputation: 7101
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
Upvotes: 0
Views: 89
Reputation: 97641
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;
}
Upvotes: 0
Reputation: 140236
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 );
}
}
Upvotes: 1
Reputation: 2014
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"
Upvotes: 0