我有以下代码:
<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提供样本吗?
由于
答案 0 :(得分:1)
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;
}