日期:2014-05-16  浏览次数:20366 次

DOM同级节点添加问题?加急
<ul   id= 'u1 '>
    <li   id= 'l1 '> <tt> 1 </tt> <tt> a </tt> </li>
    <li   id= 'l2 '> <tt> 2 </tt> <tt> b </tt> </li>
    <li   id= 'l3 '> <tt> 3 </tt> <tt> c </tt> </li>
    <li   id= 'l4 '> <tt> 4 </tt> <tt> d </tt> </li>
    <li   id= 'l5 '> <tt> 5 </tt> <tt> e </tt> </li>
</ul>

现在构造了一个新节点   <li   id= 'new '> <tt> QQ </tt> <tt> QQ </tt> </li>
我要把他插到   id= 'l3 '后面,该用什么DOM方法?
可获得节点引用:l3

添加后:
<ul   id= 'u1 '>
    <li   id= 'l1 '> <tt> 1 </tt> <tt> a </tt> </li>
    <li   id= 'l2 '> <tt> 2 </tt> <tt> b </tt> </li>
    <li   id= 'l3 '> <tt> 3 </tt> <tt> c </tt> </li>
    <li   id= 'new '> <tt> QQ </tt> <tt> QQ </tt> </li>         <--   New
    <li   id= 'l4 '> <tt> 4 </tt> <tt> d </tt> </li>
    <li   id= 'l5 '> <tt> 5 </tt> <tt> e </tt> </li>
</ul>

------解决方案--------------------
document.body.insertBefore(paragraph, document.body.firstChild)
insertBefore
------解决方案--------------------
<ul id= 'u1 '>
<li id= 'l1 '> <tt> 1 </tt> <tt> a </tt> </li>
<li id= 'l2 '> <tt> 2 </tt> <tt> b </tt> </li>
<li id= 'l3 '> <tt> 3 </tt> <tt> c </tt> </li>
<li id= 'l4 '> <tt> 4 </tt> <tt> d </tt> </li>
<li id= 'l5 '> <tt> 5 </tt> <tt> e </tt> </li>
</ul>
<a href= "# " onclick= "a() "> click me </a>

<script>
function a()
{
var s=document.createElement( "li ");
s.id= "new ";
s.innerHTML= " <tt> QQ </tt> <tt> QQ </tt> ";
document.getElementById( "u1 ").insertBefore(s,l4);
}
</script>
------解决方案--------------------
新手当练手了!
var nnew=document.createElement( "li ");
nnew.setAttribute( "id ", "new ");
var newtt1=document.createElement( "tt ");
var tt1Text=document.createTextNode( "QQ ")
newtt1.appendChild(tt1Text);
nnew.appendChild(newtt1);
var node=document.getElementById( "l4 ");
document.getElementById( "u1 ").insertBefore(nnew,node);