javascript 操作 xml,生成新的xml文档

我的问题是这样的,我现在有一段html代码如下:<body>
This is my JSF JSP page. <br>
     <div>
          <svg id="svg1">
<g id="drawBoard">
<rect id="rect_1" x="109" y="119" rx="0" ry="0" height="83" width="89" stroke="black" stroke-width="3" fill="white" fill-opacity="1" stroke-dasharray="none"></rect>
</g>

</svg>
<input type="button" id="btn2" value="按钮" onclick="updatesvg()" />
    </div>
</body>当然SVG这个元素是看不见的,我现在要用js新建一个xml文档,具体的updatesvg()函数如下：<script type="text/javascript">
function loadXML(strXML)
{
     var xmlstr = strXML;
     var xmlDoc;
     if(window.ActiveXObject)
     {
      xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
         xmlDoc.async = false;
   xmlDoc.loadXML(xmlstr);
     }
     else if (document.implementation&&document.implementation.createDocument)
     {
         xmlDoc= document.implementation.createDocument('', '', null);
    xmlDoc.loadXML(xmlstr);
     }
     else
     {
         return null;
     }
   
     return xmlDoc;
}function updatesvg()
    {
         var xmlString="<rect2 id='rect_2' x='149' y='119'></rect2>";
    
     var xmldoc=loadXML(xmlString);
        var xmlnode=document.getElementById("rect_1");
        var newNode=xmlnode.cloneNode(true); //克隆节点xmlnode        var root=xmldoc.documentElement;
        var newNode2=root.cloneNode(true); //克隆节点root        root.appendChild(newNode);//这句出错了，提示“类型不匹配”
        //root.appendChild(newNode2);//这句就对了
      
    }
</script>为什么root.appendChild(newNode);//这句话出错了，提示“类型不匹配”？？而root.appendChild(newNode2);//这句就对了，为什么啊？？root是从新建的xml文档获得的，而newNode是从网页文档中获得的，var xmlnode=document.getElementById("rect_1");
这两种不同方式获得的节点类型为什么不匹配吗？？另：获得一个结点，能获得这个结点的完整字符串吗，，比如获得var xmlnode=document.getElementById("rect_1");这个结点，但我想真正获得的是这个字符串：<rect id="rect_1" x="109" y="119" rx="0" ry="0" height="83" width="89" stroke="black" stroke-width="3" fill="white" fill-opacity="1" stroke-dasharray="none"></rect>，这怎么获得啊，难道得一个一个属性和值进行重构吗？？

解决方案 »

  1.   

    var xmlnode=document.getElementById("rect_1");
    alert(xmlnode.xml);
      

  2.   

    function updatesvg() 
        { 
            var xmlString=" <rect2 id='rect_2' x='149' y='119'> </rect2>"; 
        
            var xmldoc=loadXML(xmlString); 
            var xmlnode=document.getElementById("rect_1"); 
            alert(xmlnode.outerHTML);
            var xmldoc2 = loadXML("<rect id='"+xmlnode.id+"' x='"+xmlnode.x+"' y='"+xmlnode.y+"'> </rect>");
            var root2 = xmldoc2.documentElement; 
            var newNode = root2.cloneNode(true);
            
            var root=xmldoc.documentElement;         root.appendChild(newNode); 
          
        }
      

  3.   


    这个我有试过啊，，但输出的是  undefined
    如果换成alert(xmlnode.x); 输出的就是属性x的值：109，
    所以我想应该是它把xmlnode.xml认成是一个属性叫xml的了，而这里没有属性为xml,所以会undefined如果是从新建的那个xml中获得的节点，上面的提到的root,
    alert(root.xml); 就能输出<rect2 id='rect_2' x='149' y='119'></rect2>，，
    这个就可以正常地使用.xml所以，，是不是从html页面获取出来的节点，不能用xmlnode.xml来获得整个串??
      

  4.   


    alert(xmlnode.outerHTML);这个正解了，，我还有试过用innerHTML,原来outerHTML才是对的啊，，谢了，要再生成一个结点，只有这种方式了吗，
    var xmldoc2 = loadXML("<rect id='"+xmlnode.id+"' x='"+xmlnode.x+"' y='"+xmlnode.y+"'> </rect>");
    因为我属性有20多个，，难道也只能这样了，，
    或者用获得属性集，然后for循环??
      

  5.   

    属性集在JS里获取的办法：for(var i in xmlnode){alert(i+"====>"+xmlnode[i]);}
    但是这样获取的属性很多
    还是建议一个一个设置吧