如何用JS在LI中增加一个LI，并且LI中有个ID的属性

如：
<li id="node0" noDrag="true" noSiblings="true" noDelete="true" noRename="true"><a href="#">Root node</a>
    <li id="node0"><a href="#">xxxxx</a></li>
    <li id="node1"><a href="#">Europe</a></li>
</li>红色的用JS实现插入，如何实现呢？

解决方案 »

  1.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload = function(){
    var i = 0;
    document.getElementById('click').onclick = function(){
    if(i != 0) return;
    var node0 = document.getElementById('node0');
    var node1 = document.createElement('li');
    node1.setAttribute('id','node1');
    var a = document.createElement('a');
    a.setAttribute('href','#');
    a.innerHTML = 'xxxxxx';
    node1.appendChild(a);
    node0.insertBefore(node1);
    i++;
    };
    };</script>
    </head><body>
    <li id="node0" noDrag="true" noSiblings="true" noDelete="true" noRename="true"> <a href="#">Root node </a>
        <li id="node2"> <a href="#">Europe </a> </li>
    </li> 
    <br />
    <input type="button" id="click" value="添加" />
    </body>
    </html>
      

  2.   


    LI下面套Li... 不符合规则..
    <li id="node0" noDrag="true" noSiblings="true" noDelete="true" noRename="true">
    <a href="#">Root node </a> 
        <li id="node1"> <a href="#">Europe </a> </li> 
    </li> 
    <input type="button" value="ADD" onclick="addLi()" />
    <script type="text/javascript">
    <!--
    function addLi(){
    var o = document.getElementById('node0');
    var oldo = document.getElementById('node1');
    var li = document.createElement('li');
    li.id='node0';
    li.innerHTML = '<a href="#">xxxxx </a>';
    o.appendChild(li)
    }
    //-->
    </script>
      

  3.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
            window.onload = function(){
                var i = 0;
                document.getElementById('click').onclick = function(){

                    if(i != 0) return;
                    var node0 = document.getElementById('node0');
                    var node1 = document.createElement('li');
    var a = document.createElement('a');
                    node1.setAttribute('id','node1');         
                    a.setAttribute('href','#');
    a.innerHTML = 'xxxxxx';
                    node1.appendChild(a);
                    node0.appendChild(node1);
    a.innerHTML = 'xxxxxx';
                    i++;
                };
            };</script>
    </head><body>
    <li id="node0" noDrag="true" noSiblings="true" noDelete="true" noRename="true"> <a href="#">Root node </a>
        <li id="node2"> <a href="#">Europe </a> </li>
    </li> 
    <br />
    <input type="button" id="click" value="添加" />
    </body>
    </html>